Redux-thunk中间件

文章目录

• 安装
• 使用
• • 1. 创建store
  • 2. 使用redux-thunk
  • 3. action的统一管理
  • 4. Reducer
• redux-thunk 源码

---

Redux-thunk可以使 store.dispatch(action)中的action可以是函数类型，从而可以进行异步请求(axios)等处理

安装

npm install redux-thunk
或
yarn add redux-thunk

---

使用

1. 创建store

并使用Redux DevTools插件和Redux-thunk中间件

src/store/index.js

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

// window.__REDUX_DEVTOOLS_EXTENSION__  可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

// 使用Redux-thunk中间件
const enhancer = composeEnhancers(applyMiddleware(thunk));

// 创建store
const store = createStore(reducer, enhancer);

export default store;

2. 使用redux-thunk

action可以返回函数，用于进行异步请求(axios)

src/TodoList.js

import { Component, Fragment } from 'react';
import { List } from 'antd';
import store from './store/index';
import { getTodoList } from './store/actionCreator';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        // store.subscribe(this.storeChange.bind(this)); // store发生改变时，自动触发
    }
    render() {
        <Fragment>
            <List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
        </Fragment>
    }
    componentDidMount() {
        // 使用redux-thunk后，action可以返回函数，用于进行异步请求(axios)
        const action = getTodoList();
        store.dispatch(action);
    }
}
export default TodoList;

3. action的统一管理

action可以返回函数，用于进行异步请求(axios)

src/store/actionCreator.js

import axios from 'axios';

export const initListAction = list => ({
    type: 'init_list',
    list,
});

// 使用redux-thunk后，action可以返回函数，用于进行异步请求(axios)
export const getTodoList = () => {
    return dispatch => {
        let list = [];
        axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList').then(function (res) {
            if (res.data.data.length > 0) {
                for (const val of res.data.data) {
                    list.push(val.name);
                }
            }
            const action = initListAction(list);
            dispatch(action); // 将action传给store
        });
    };
};

4. Reducer

src/store/reducer.js

const defaultState = {
    list: []
};

export default (state = defaultState, action) => {
    console.log(state, action);
    let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
    if (action.type === 'init_list') {
        newState.list = action.list;
    }
    return newState;
};

---

redux-thunk 源码

redux-thunk的代码量非常少，我们直接把它的代码贴上来看一下。这里我们看的是最新版的v2.3.0的代码：

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

它的核心代码其实只有两行，就是判断每个经过它的action：如果是function类型，就调用这个function（并传入 dispatch 和 getState 及 extraArgument 为参数），而不是任由让它到达 reducer，因为 reducer 是个纯函数，Redux 规定到达 reducer 的 action 必须是一个 plain object 类型。