文章12
标签10
分类3

Redux中间件笔记

Redux中间件笔记

安装Redux-thunk:

npm install redux-thunk --save

Redux-thunk引用:

import { applyMiddleware  } from 'redux'

Redux thunk可以将异步操作移出到action里面,在action里面写函数,如ajax请求:

export const getTodoList = () => {
    return (dispatch) => {
        axios.get('/api/todolist').then((res) => {
            const data = res.data;
            const action = initListAction(data);
            dispatch(action);
         }) 
    }
}

Redux中间件流程图:

中间件的中间指的在Action和Store的中间是对dispatch的一个封装,没使用中间件时dispatch只能接收一个对象,而使用中间件后,dispatch可以接收一个函数,他会在dispatch时先执行,执行完需要调用store时在调用。

安装Redux-saga中间件:

npm install redux-saga --save

Redux-saga引用:

import createSagaMiddleware from 'redux-saga';

在/store/index.js 中输入

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

}) : compose;
const enhancer = composeEnhancers(
     applyMiddleware(sagaMiddleware)
)
const store = createStore(reducer,enhancer);
sagaMiddleware.run(TodoSagas);
export default store;

创建一个sagas.js进行action及异步操作的处理

yield put(action) //类似dispatch将action发送至reducer
 yield takeEvery(action.type, getInitList); // 第一个参数为要监听的action.type,第二个为要处理action的事件。
本文作者:Bunrun
本文链接:https://www.bugrun.cn/posts/a36c.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可