Redux概览

Posted 2022-08-22 lazy-cat

简介

• Redux 是一个有用的架构
• Redux 的适用场景：多交互、多数据源

工作流程图

action

用户请求

//发出一个action
import  createStore  from 'redux';
const store = createStore(fn);

//其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置
const action = 
  type: 'ADD_TODO',
  data: 'Learn Redux'
;

store.dispatch(action);

Reducer

状态机
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象

const defaultState = 0;
const reducer = (state = defaultState, action) => 
  switch (action.type) 
    case 'ADD':
      return 
          ...state,
          data: action.data
      
    default: 
      return state;
  
;

Recucer的拆分

//index
import combineReducers from 'redux';
import proIndex from './proIndex';
import product from './product'
export default combineReducers(
    proIndex,
    product,
);

//product
import actions from '../action/index'
import getDocMenu from "../action/user/product";

const 
    GET_PRODUCT_DOCUMENT_SUCCESS
 = actions;

export default (state = ,action) =>
    switch (action.type) 
        case GET_PRODUCT_DOCUMENT_SUCCESS:
            return
                ...state,
                getDocMenu: action.data,
            
        default:
            return state;
    


//proIndex
import actions from '../action/index';

const 
    GET_SERVICE_CLASSIFICATION_SUCCESS,
    GET_SERVICE_SUBJECT_SUCCESS,
 = actions;

export default (state = ,action) => 
    switch (action.type) 
        case GET_SERVICE_CLASSIFICATION_SUCCESS:
            return 
                ...state,
                getServiceClass: action.data,
            ;
        case GET_SERVICE_SUBJECT_SUCCESS:
            return 
                ...state,
                getServiceSubject: action.data,
            ;
        default:
            return state;
    
;

store

数据仓库

import  createStore  from 'redux'
import todoApp from './reducers'
//创建store仓库
const store = createStore(todoApp)
//createStore方法还可以接受第二个参数()，表示 State 的最初状态。这通常是服务器给出的(window.STATE_FROM_SERVER就是整个应用的状态初始值)
const store = createStore(todoApp, window.STATE_FROM_SERVER)

//引入action
import 
  addTodo,
  toggleTodo,
  setVisibilityFilter,
  VisibilityFilters
 from './actions'

//打印当前状态
console.log(store.getState())

// 订阅state变化
// subscribe()方法返回一个函数用于取消监听
const unsubscribe = store.subscribe(() => console.log(store.getState()))

// 发出一些action
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

//取消监听状态更新
unsubscribe()

配置中间件

import  createStore  from 'redux'
import reducer from '../reducer/index'
import thunk from 'redux-thunk'
import promise from 'redux-promise'
import logger from 'redux-logger'

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

redux-thunk

store.dispatch()只能传入一个action对象，redux-thunk中间件则将其扩展为一个方法

//配置
import  createStore  from 'redux'
import reducer from '../reducer/index'
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

//使用
export function getDocMenu(query='') 
    return async(dispatch) => 
        try 
            const data = (await axios(`$baseUrldoc.do?$Qs.stringify(query)`)).data;
            //这里的dispatch相当于store.dispatch
            dispatch(
                type: GET_PRODUCT_DOCUMENT_SUCCESS,
                data: data
            )
        
        catch(error)
            dispatch(
                type: GET_PRODUCT_DOCUMENT_FAILURE,
                error: new Error('获取文档菜单失败')
            )
        
    

redux-saga

解决异步的另一种方法

//配置
import  createStore, applyMiddleware  from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(mySaga)


//使用
// action creators
export function GET_USERS(users) 
    return  type: RECEIVE_USERS, data 


export function GET_ERROR(error) 
    return  type: FETCH_USERS_ERROR, data 



export function Begin_GET_POSTS() 
    return  type: BEGIN_GET_POSTS 


//saga.js
import  takeEvery  from 'redux-saga';
import  call, put  from 'redux-saga/effects';
import axios from 'axios';
import  BEGIN_GET_POSTS, GET_POSTS, GET_POSTS_ERROR  from '../reducers';

// worker saga
function* showPostsAsync(action) 
    try 
        const response = yield call(axios.get, 'https://jsonplaceholder.typicode.com/posts');
        yield put(
            type: GET_POSTS,
            data: response.data
        );
     catch(e) 
        yield put(
            type: GET_ERROR,
            error: new Error('some error')
        );
    


// wacther saga
function* watchGetPosts() 
    yield takeEvery(BEGIN_GET_POSTS, showPostsAsync);


// root saga
export default function* rootSaga() 
    yield watchGetPosts()
 

//user.js

componentWillMount() 
    this.props.dispatch(Begin_GET_POSTS());