redux中间件-redux thunk 使用

版权声明：Oreo https://blog.csdn.net/weixin_43154931/article/details/82589736

redux中间件—redux thunk 使用

redux中 action返回的是一个对象数据，redux-thunk中间件可以使其看起来直接返回了function

1. 配置过程

1.1. 安装redux-thunk

npm install --save redux-thunk;

1.2. 在store文件引入thunk

import ReduxThunk from 'redux-thunk';

1.3. 修改store 文件

旧 store

import { createStore } from 'redux';
import reducers from './../reducers';

const store = createStore(reducers);

export default store;

新 store

import { createStore， applyMiddleware  } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducers';

const store = createStore(reducers， applyMiddleware(thunk));

export default store;

ps: 配置redux - devtools

最新store

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(
  applyMiddleware(thunk)
));
export default store;

使用实例

旧 action

export const addTestD = (some) => ({
  type: actionTypes.ADD_TEST,
  number: some
});

使用thunk之后的action

export const addTest = (number) => {
  return (dispatch) => {
    // 可以在这里增加其他代码， 请求之类
    dispatch({
      type: actionTypes.ADD_TEST,
      number: number
    })
  }
};