react插件之redux-thunk

安装 npm install redux-thunk -S
作用：增强redux的功能，让redux中dispatch()可以派发一个函数，可以把函数抽离出来以便其他地方使用

项目结构

// 在store全局状态下 
// index.js

// 原本只需要引入一个createStore，现在需要引入applyMiddleware(类似于中间件)
import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk'
import reducer from './reducer'

// 参数1：reducer函数，用于管理状态的函数
// 参数2：是增强redux的功能，使用 thunk 插件，如果有多个插件用数组的方式引入applyMiddleware([thunk,xxxx,xxxx])
// 【注】原本参数2是全局状态state初始值，由于reducer函数抽离出去了，并给了对应的默认值，可以不写
// 本身store.dispatch()接收对象
// 使用thunk之后，store.dispatch()接收既可以对象又可以接收函数
const store = createStore(reducer, applyMiddleware(thunk));

export default store;

在项目中使用目录结构

// 在项目中实际使用，结合了 react-redux 在此之前要复习一下react-redux的使用

// 在容器组件 Two.js 中
import {getDataAction} from './twoAction' // 引入action函数
function mapDispatchToProps(dispatch){
  return {
    async getData(){
      // 现在可以传入一个函数了，getDataAction()不加括号直接传入名字也可以执行
      dispatch(getDataAction);
    }
  };
}

// 在twoAction.js中
export const setDataAction = (data)=>{
    return {
        type: 'set-two-data',
        data
    }
}

//数据异步处理
export const getDataAction = async (dispatch)=>{
    // 请求数据
    let response = await fetch('/topic/v1/find/getTabData.json?page=1&size=5&tabId=6');
    // json处理数据
    let data = await response.json();
    // 对数据进行过滤
    let newData = data.data.result.map(({picUrl,title, topicId})=>({picUrl,title, id: topicId }));
    // 组装action
    let action = setDataAction(newData);
    // 派发
    dispatch(action);
}