redux， redux-thunk，react-redux的使用

在react项目中，经常会使用到状态管理工具 。
记录：先看是什么，再看怎么用

1. redux-thunk是一个redux的中间件，用来处理redux中的复杂逻辑，比如异步请求；
   redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数；

2. react-redux相当于一个适配react的一个redux插件；redux本身可以在任何项目中使用，react-redux带来了更适合react的方法；

3.而redux就是来管理数据的一个仓库了。

安装方法：
redux-thunk ：npm install redux-thunk
react-redux：npm install react-redux
redux：npm install redux
如果项目是使用yarn进行初始化的，建议使用 yarn add
（请不要在一个项目中使用2个包管理工具，容易出现问题）

• redux使用
  • 文件解释
    |- - action 创建对应的reducers要使用到的对象 （或者异步）
    |- - reducers 执行文件（实现数据的更新修改）
    |- - store.js 初始化redux
    |- - actionType.js 定义所有dispatch()要使用到的type（常量）
    |- - index.js 该文件主要存reducers下的所有文件地址 并进行抛出

store.js内容

import { createStore} from "redux";
import actionState  from "./index";
export default createStore(actionState);

actionType.js内容

//count的操作常量
export const ADDIN ='addin';
export const REDUCE ='reduce';

index.js的内容

import { combineReducers } from "redux";
import fn from "./reducres/count";
export default combineReducers({
   fn,
})

reducers文件内容

reducers下面可以多个js文件
count.js

import { ADDIN,REDUCE } from "../constant";
const InitState = 0 ;
export default function count(preState=InitState,action){
       let {type,data} = action;
       console.log(preState);
       switch (type) {
           case ADDIN:
               return preState + data;
           case REDUCE:
               return  preState - data;
           default:
             return preState;
       }
}

action文件

count.js

import { ADDIN,REDUCE } from "../constant";


export const addaction = (data)=>{
    return {
        type:ADDIN,
        data
    }
}

export const reduceaction = (data)=>{
    return {
        type:REDUCE,
        data
    }
}

自己看的