手牵手学习react之如何使用redux-thunk中间件（四）

背景

Redux store 仅支持同步数据流。使用 thunk 等中间件可以帮助在 Redux 应用中实现异步性。

要在应用中使用 thunk 中间件，请务必安装redux-thunk安装包

yarn add redux-thunk

应用

store的入口文件（index.js）注入

import { createStore, applyMiddleware } from "redux"; //引入applyMiddleware
import thunk from "redux-thunk"; //引入redux-thunk中间件
import reducer from "./reducer";

//applyMiddleware，在 Redux 中使用中间件时，就需要使用 applyMiddleware() 这个函数进行包裹

const store = createStore(reducer, applyMiddleware(thunk));//注入到store中

export default store;

介绍

redux-thunk:（指的是action和store中间，是对dispatch的一个升级）：redux-thunk(属于redux的中间件，而不是react的)，action正常返回的是一个对象，但是用了redux-thunk后，就可以返回一个函数,函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装，会先执行函数，将结果继续dispatch；注意：将异步请求放到actionGreator中统一管理，会比较方便；

案例

• 定义常量，有利于定位变量命名报错

// actionType.js 定义常量

export const LIST_DOTO_ITEM = "list_doto_item";

• 统一放置action，方便维护

// actionCreators.js 统一放置action
// 模拟axios请求

import axios from "axios";
import { LIST_DOTO_ITEM } from "./actionType";

export const initListAction = (data) => ({
  type: LIST_DOTO_ITEM,
  data,
}); //定义action

// 将axios请求放置在actionCreators.js中
/**
 * 由此往下：在react中使用redux-thunk
 * 优点：redux的中间件指的是action和store之间。之前我们说action只能是一个对象，所以action是一个对象直接派发给了store。但是现在，当我们使用了redux-thunk之后，action可以是函数了。
 * 模拟数据初始化，将http请求统一放置在store中，然后组件通过dispatch去派发去调用
 * 重点：函数返回dispatch参数，用于派发action
 */

export const getTodoList = () => {
  return (dispatch) => {
    axios.get("/list.json").then((res) => {
      const data = res.data;
      const action = initListAction(data);
      dispatch(action);
    });
  };
};

• 组件调用

import store from "./store";

import { getTodoList } from "./store/actionCreators";

componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);
}

• reducer

import { LIST_DOTO_ITEM } from "./actionType";

const defaultState = {
  inputValue: "",
  list: [],
};

// reducer可以接收state,但绝不能修改state
export default (state = defaultState, action) => {
 if (action.type === LIST_DOTO_ITEM) {
     const newState = JSON.parse(JSON.stringify(state));
     newstate.list = action.data;
     return newState;
  }
}

惟愿山河无恙，国泰民安，幸哉~