关于
redux
中间件使用的简单记录
可以在github
搜索redux-thunk
||redux-devtools
||redux-devtools-extension
查看文档
- 在项目安装
redux-thunk
。
yarn add redux-thunk
||npm install redux-thunk --save
- 在创建 redux 时,使用 redux, redux-thunk 配置redux-devtools
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk)
);
const store = createStore(reducer, enhancer);
export default store;
- 在 actionCreator 创建 action ,就可以使用函数作为返回值了
export const getTodoList = () => {
// 这里可以接收 dispatch 参数,直接使用,相当于调用 store.dispatch 方法
return (dispatch) => {
axios.get('/api/todolist')
.then((res) => {
const data = res.data
const action = getInitListAction(data)
dispatch(action)
})
.catch((error) => {
console.log(error)
})
}
}
- 在
componentDidMount
钩子函数中调用 action
componentDidMount() {
const action = getTodoList()
store.dispatch(action)
}
- redux 接收传值,处理改变 state
export default (state = defaultState, action) => {
if (action.type === INIT_LIST_ACTION) {
const newState = JSON.parse(JSON.stringify(state))
newState.list = action.data;
return newState;
}
return state;
}