Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解

React 是咱们的视图框架，但在大型项目开发的时候须要公用的数据状态是很难管理的，有明显父子关系的组件还比较方便传递值，但不要紧的组件传值是很是麻烦的，这时候就须要用到咱们的状态管理库 Redux，该文章会讲解在实际React项目开发中redux + react-redux + redux-thunk 组合应用，这也是咱们如今企业项目开发中最经常使用的搭配，让你可以快速应用起来！

1、Redux 介绍

Redux 是搭配 React 项目开发中最经常使用的状态管理库，你们知道在咱们 React项目开发时，组件的公用数据状态(如用户信息等)，可能多组件都会用到，若是组件间的关系比较明确(如父子关系)，传递还比较方便，但若是关系不明确或者毫无关系，这时候就很是麻烦了，但借助咱们的Redux能够把这些状态存到Redux的store中，哪一个组件须要就去store里面取，哪一个组件想要改变store，就去调取相应的action，action会触发reducer改变store，这样每一个组件的store都会改变。

2、Redux 安装

npm i redux react-redux redux-thunk
复制代码

这里咱们一次安装了三个库：

redux：核心库，完成store数据状态管理，reducer(触发会返回新的store替换老的store)管理，action(reducer咱们不能直接触发，须要调用action来触发reducer)管理。

react-redux：用来简化在React中使用Redux的流程，其中Provider提供器，全局提供store状态，connect链接器，须要store状态的用他来链接。

redux-thunk：使redux的action可以写异步方法，自己action中是不能写异步方法的，用了redux-thunk才能够。

3、建立store相应文件(store、reducer、action、action-type)

在项目src目录中建立相应目录和文件

store/index.js：建立 store，并把 reducer传入做为第一个参数，应用中间件 redux-thunk做为第二个参数，具体代码以下

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

const store = createStore(reducer, applyMiddleware(thunk));

export default store;
复制代码

store/reducer.js：建立了一个count的reducer，每次触发action的时候会把传过来的值做为第二个参数，第一个参数为老的state，reducer执行完毕返回新的state会替换老的state，其中咱们还引入redux的combineReducers是用来合并多个reducer最终返回一个集成的reducer

import { combineReducers } from "redux";
import { COUNT_ADD, COUNT_REDUCE } from "./action-type";

const initCount = {
  count: 0,
};

function count(state = initCount, action) {
  switch (action.type) {
    case COUNT_ADD:
      return state.count + 1;
    case COUNT_REDUCE:
      return state.count - 1;
    default:
      return state;
  }
}

export default combineReducers({
  count,
});
复制代码

store/action.js：每次咱们想要改变store，都须要先触发action，另外咱们用了redux-thunk后。能够在action中执行异步方法(如ajax数据请求等)，action去触发reducer发生store的改变。在此示例中，个人action比较简单，实际中你们的可能比较复杂，可是原理相同，一个action方法，执行相应逻辑(如ajax请求，或逻辑判断等)，最后返回一个action对象，reducer会根据action对象的type和data来执行相应的store更改

import { COUNT_ADD, COUNT_REDUCE } from "./action-type";

export const receiveCountAdd = () => ({ type: COUNT_ADD });

export const receiveCountReduce = () => ({ type: COUNT_REDUCE });
复制代码

store/action-type.js：这里面是咱们相应action对象的type，为何我要作这么一个步骤，由于咱们须要在action.js传递action对象的时候加上他，也要在reducer.js判断相应的type，避免由于type比较长比较复杂，两边不一致，程序也不会报错(由于reducer判断没有相应type就会走default)，因此咱们设置一个常量做为type

// count自增
export const COUNT_ADD = 'COUNT_ADD'

// count自减
export const COUNT_REDUCE = 'COUNT_REDUCE'
复制代码

到此咱们相应的store就总体建立完毕，接下来就是在相应组件中使用它了。

4、组件中接收store及触发action改变store

在此以前咱们要在全局用react-redux的Provider全局提供store状态，这里咱们直接在index.js中使用它，并把store传递给他的属性store

import React from "react";
import ReactDOM from "react-dom";
import App from "./views/App";
import { Provider } from "react-redux";
import store from './store'

ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);
复制代码

接下来咱们就能够在组件中使用connect链接器获取咱们须要的store以及相应的action了，首先引入connect和咱们建立的相应action：receiveCountAdd，在暴露组件的使用connect，它是一个高阶函数(执行函数返回一个函数)，执行第一个函数时有两个参数(第一个为须要接收的state，这里咱们是count，第二个为action，这里用的es6写法)，第二个函数再传入咱们的组件名，作此步骤后，咱们须要的store和action就会挂载到咱们的props上，而后咱们获取或者执行就很是简单了(见useEffect中)

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { receiveCountAdd } from "../../store/action";

function Article(props) {
  useEffect(() => {
    props.receiveCountAdd();
    console.log(props.count);
  }, []);
  return <div>文章信息</div>;
}

export default connect(
  (state) => ({ count: state.count }),
  { receiveCountAdd },
)(Article);
复制代码

至此，Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解就讲解完毕了，若是有不太明白的小伙伴，能够留言哦！