React - redux 使用（由浅入深）

中文文档：http://www.redux.org.cn/
英文文档：https://redux.js.org/
Github：https://github.com/reactjs/redux
可直接参照 目录十 进行使用 react-redux

一. redux理解

1. redux 介绍

• redux 是一个专门用于做状态管理的JS库(不是react插件库)。
• 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。
• 作用: 集中式管理 react 应用中多个组件共享的状态。
• 可以构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。
• 体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。

2. redux 使用情况

• 一个状态多个组件使用，多个组件可以随时拿到（共享）。
• 一个组件需要改变另一个组件的状态（通信）。
• 能不使用就不使用, 状态共享使用不方便时考虑使用。

3. redux 工作流程

4. redux 三个核心概念

4.1 Action

• 可以省略创建。
• 把数据从应用传到 store 的有效载荷，Action 是 store 数据的唯一来源。
• 一般来说会通过 store.dispatch() 将 action 传到 store。
• 有两个属性
  type ：标识属性, 值为字符串, 唯一, 必要属性。
  data ：数据属性, 值类型任意, 可选属性

4.2 Store

• 用来维持应用所有的 state 树 的一个对象，改变 store 内 state 的惟一途径是对它 dispatch 一个 action。
• Store 不是类，它只是有几个方法的对象。 要创建它，只需要把根部的 reducing 函数传递给 createStore。

4.3 Reducers

• 指定了应用状态的变化如何响应 actions 并发送到 store 。
• Reduce r函数会接收到两个参数，分别为：之前的状态、动作对象。
• Reducer 有两个作用：初始化状态、加工状态。
• Reducer 的第一次调用时，是store自动触发的，传递的 preState(之前的状态) 是undefined

5. redux 核心API

5.1 createStore()

• 创建一个 Redux store 来以存放应用中所有的 state。
• 应用中应有且仅有一个 store。

5.2 Store

• 用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的惟一途径是对它 dispatch 一个 action。
• Store 不是类。它只是有几个方法的对象。 要创建它，只需要把根部的 reducing 函数传递给 createStore。

5.2.1 Store 方法

5.2.1.1 getState()

store.getState()

• 返回应用当前的 state 树。
• 它与 store 的最后一个 reducer 返回值相同。

5.2.1.2 dispatch(action)

store.dispatch(action)

• 分发 action。这是触发 state 变化的惟一途径。
• 会使用当前 getState() 的结果和传入的 action 以同步方式的调用 store 的 reduce 函数。返回值会被作为下一个 state。

5.2.1.3 subscribe(listener)

store.subscribe(() => { });

• 添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。可以在回调函数里调用 getState() 来拿到当前 state。
• 状态改变后重新渲染，有两种方法：
  （1）在组件的 componentDidMount 生命周期钩子中调用 store.subscribe

  componentDidMount() {
      // 监听redux中状态的变化，只要变化，就调用render
      store.subscribe(() => {
      	//状态假更新，每次状态更新都会调用render
          this.setState({});
      });
  }
  

  （2）在 index.js 文件中检测 store 中状态的改变，一旦发生改变重新渲染<App/>

  import React from "react";
  import reactDOM from "react-dom";
  import App from "./App";
  import store from "./redux/store";
  reactDOM.render(<App />, document.getElementById("root"));
  // store中状态改变，重新渲染dom
  store.subscribe(() => {
    reactDOM.render(<App />, document.getElementById("root"));
  });
  

二. redux精简版使用（不使用 Action）

1. src 文件夹下创建一个 redux 文件夹，并在 redux 文件夹中创建两个文件，分别是：store.js、count_reducer.js，对应store，reducer
2. store.js中修改

   1.引入redux中的createState函数，创建一个store
   2. createState调用时，要传入一个为其服务的reducer
   3. 记得暴露 store

   /**
    * 该文件专门用于暴露一个store对象，整个应用只有一个store对象
    */
   // 引入createStore，专门用于创建redux中最为核心的store对象
   import { createStore } from "redux";
   // 引入为count组件服务的reducer
   import countReducer from "./count_reducer";
   
   const store = createStore(countReducer);
   export default store;
   

3. count_reducer.js中修改

   /**
    * 1. 该文件是用于创建一个为为Count组件服务的reducer,reducer的本质是一个函数
    * 2. reducer函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）
    */
   const intState = 0; //初始化状态
   // preState===undefined时，preState = intState
   export default function countReducer(preState = intState, action) {
     // 从action对象中获取：type,data
     const { type, data } = action;
     // 根据type决定加工数据
     switch (type) {
       // 加
       case "increment":
         return preState + data;
       //  减
       case "decrement":
         return preState - data;
       default:
         return preState;
     }
   }
   

4. 组件中使用

   1. 获取状态：store.getState()
   2. 改变状态：store.dispatch({ type: “方法类型”, data: 需要操作的数据 })
   3. 状态改变后重新渲染

   import React, { Component } from "react";
   // 引入store，用于获取redux中保存的状态
   import store from "../../redux/store";
   
   export default class Count extends Component {
     /**
      * 在index.js中监听状态改变进行渲染，一劳永逸
      */
     // componentDidMount() {
     //   // 监听redux中状态的变化，只要变化，就调用render
     //   store.subscribe(() => {
     //     // 假更新
     //     this.setState({});
     //   });
     // }
     //   加法
     increment = () => {
       const { value } = this.selectNumber;
       store.dispatch({ type: "increment", data: value * 1 });
     };
     //   减法
     decrement = () => {
       const { value } = this.selectNumber;
       store.dispatch({ type: "decrement", data: value * 1 });
     };
     //   奇数再加
     incrementIfOdd = () => {
       const { value } = this.selectNumber;
       const count = store.getState();
       if (count % 2 !== 0) {
         store.dispatch({ type: "increment", data: value * 1 });
       }
     };
     //   异步加
     incrementAsync = () => {
       const { value } = this.selectNumber;
       setTimeout(() => {
         store.dispatch({ type: "increment", data: value * 1 });
       }, 500);
     };
     render() {
       return (
         <div>
           <h1>当前求和为：{store.getState()}</h1>
           <select ref={(cur) => (this.selectNumber = cur)}>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
           </select>
           &nbsp;&nbsp;
           <button onClick={this.increment}>+</button>
           &nbsp;&nbsp;
           <button onClick={this.decrement}>-</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementIfOdd}>若当前求和为奇数，再加</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementAsync}>异步加</button>
         </div>
       );
     }
   }
   

三. redux完整版使用（在 redux精简版基础上使用 Action）

1. 在redux文件夹中新增两个文件，分别是：constant.js、count__action.js
   constant.js 放置容易写错的type值
   count__action.js 专门用于创建action对象
2. constant.js 文件修改

   /**
    * 该模块用于定义action对象中type类型的常量值
    * 目的只有一个：便于管理的同时防止程序员单词写错
    */
   export const INCREMENT = "increment";
   export const DECREMENT = "decrement";
   

3. count__action.js 文件修改

   /**
    * 该文件专门为Count组件生成action对象
    */
   import { INCREMENT, DECREMENT } from "./constant";
   
   // 正常方式
   // export const createIncrementAction = (data) => {
   //   return { type: "increment", data };
   // };
   // 简写方式
   export const createIncrementAction = (data) => ({ type: INCREMENT, data });
   export const createDecrementAction = (data) => ({ type: DECREMENT, data });
   

4. count_reducer.js文件修改，使用 constant.js 文件

   /**
    * 1. 该文件是用于创建一个为为Count组件服务的reducer,reducer的本质是一个函数
    * 2. reducer函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）
    */
   import { INCREMENT, DECREMENT } from "./constant";
   
   const intState = 0; //初始化状态
   export default function countReducer(preState = intState, action) {
     // 从action对象中获取：type,data
     const { type, data } = action;
     // 根据type决定加工数据
     switch (type) {
       // 加
       case INCREMENT:
         return preState + data;
       //  减
       case DECREMENT:
         return preState - data;
       default:
         return preState;
     }
   }
   

5. 使用的组件中修改

   import React, { Component } from "react";
   // 引入store，用于获取redux中保存的状态
   import store from "../../redux/store";
   // 引入actionCreator，专门用于创建action对象
   import {
     createIncrementAction,
     createDecrementAction,
   } from "../../redux/count_action";
   
   export default class Count extends Component {
     //   加法
     increment = () => {
       const { value } = this.selectNumber;
       store.dispatch(createIncrementAction(value * 1));
     };
     //   减法
     decrement = () => {
       const { value } = this.selectNumber;
       store.dispatch(createDecrementAction(value * 1));
     };
     //   奇数再加
     incrementIfOdd = () => {
       const { value } = this.selectNumber;
       const count = store.getState();
       if (count % 2 !== 0) {
         store.dispatch(createIncrementAction(value * 1));
       }
     };
     //   异步加
     incrementAsync = () => {
       const { value } = this.selectNumber;
       setTimeout(() => {
         store.dispatch(createIncrementAction(value * 1));
       }, 500);
     };
     render() {
       return (
         <div>
           <h1>当前求和为：{store.getState()}</h1>
           <select ref={(cur) => (this.selectNumber = cur)}>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
           </select>
           &nbsp;&nbsp;
           <button onClick={this.increment}>+</button>
           &nbsp;&nbsp;
           <button onClick={this.decrement}>-</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementIfOdd}>若当前求和为奇数，再加</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementAsync}>异步加</button>
         </div>
       );
     }
   }
   

四. redux 异步action（在 redux完整版基础上使用 异步action）

1. 安装 redux-thunk
yarn add redux-thunk
2. 在 store.js 中修改配置redux-thunk

   /**
    * 该文件专门用于暴露一个store对象，整个应用只有一个store对象
    */
   
   // 引入createStore，专门用于创建redux中最为核心的store对象
   import { createStore, applyMiddleware } from "redux";
   // 引入为count组件服务的reducer
   import countReducer from "./count_reducer";
   // 引入redux-thunk，用于支持异步action
   import thunk from "redux-thunk";
   
   const store = createStore(countReducer, applyMiddleware(thunk));
   export default store;
   

3. count_action.js 文件中配置 异步action

   /**
    * 该文件专门为Count组件生成action对象
    */
   import { INCREMENT, DECREMENT } from "./constant";
   /**
    * 同步action，就是指action的值为Object类型的一般对象
    */
   // 正常方式
   // export const createIncrementAction = (data) => {
   //   return { type: "increment", data };
   // };
   // 简写方式
   export const createIncrementAction = (data) => ({ type: INCREMENT, data });
   export const createDecrementAction = (data) => ({ type: DECREMENT, data });
   /**
    * 异步action，就是指action的值是函数，异步action中一般都会调用同步action，异步action不是必须要用的
    */
   export const createIncrementAsyncAction = (data, time) => {
     return (dispatch) => {
       setTimeout(() => {
         // 异步任务有结果后，分发一个同步的action去真正操作数据
         dispatch(createIncrementAction(data));
       }, time);
     };
   };
   

4. 组件中修改使用 异步action

   // 引入actionCreator，专门用于创建action对象
   import {
     createIncrementAction,
     createDecrementAction,
     createIncrementAsyncAction,
   } from "../../redux/count_action";
   
   //   异步加
   incrementAsync = () => {
     const { value } = this.selectNumber;
     // setTimeout(() => {
     store.dispatch(createIncrementAsyncAction(value * 1, 500));
     // }, 500);
   };
   

五. react-redux 的基本使用（在 redux 异步action修改使用 react-redux）

1. 安装 react-redux
   yarn add react-redux
2. 创建一个容器组件

   1.在 src 文件夹下创建一个 containers 容器文件夹
   2.containers 文件夹中创建一个 Count 文件夹
   3.Count 文件夹下创建一个index.jsx文件

   // 引入Count的UI组件
   import CountUI from "../../components/Count";
   // 引入connect用于连接UI组件与redux
   import { connect } from "react-redux";
   // 引入action
   import {
     createIncrementAction,
     createDecrementAction,
     createIncrementAsyncAction,
   } from "../../redux/count_action";
   
   /**
    * 1. mapStateToProps 函数的返回值是一个对象
    * 2. 返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件的props的value
    * 3. mapStateToProps 函数用于传递状态
    */
   function mapStateToProps(state) {
     return {
       count: state,
     };
   }
   /**
    * 1. mapDispatchToProps 函数的返回值是一个对象
    * 2. 返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件的props的value
    * 3. mapDispatchToProps 函数用于传递操作状态的方法
    */
   function mapDispatchToProps(dispatch) {
     return {
       add: (data) => {
         // 通知redux执行方法
         dispatch(createIncrementAction(data));
       },
       delete: (data) => dispatch(createDecrementAction(data)),
       addAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)),
     };
   }
   // 使用connect()()创建并暴露一个Count的容器组件
   export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
   

3. App.js 文件中修改引入的容器组件地址，并传入 store

   import React, { Component } from "react";
   import Count from "./containers/Count";
   import store from "./redux/store";
   
   export default class App extends Component {
     render() {
       return (
         <div>
           {/* 给容器组件传递store */}
           <Count store={store} />
         </div>
       );
     }
   }
   

4. 修改组件中获取状态和修改状态的方式，通过this.props方式
   • 获取状态：
     this.props.count
   • 调用 action 修改状态，对应mapDispatchToProps中的方法
     this.props.add(value * 1);

六. react-redux 的优化使用（在 react-redux 的基本使用 中修改）

1. 容器组件 和 UI组件 合并成一个组件
   connect模板：

   export default connect(
      (state) => ({ key: value }),//映射状态
      { key: action方法, }//映射操作状态的方法
   )(UI组件);
   

   1.将 src/component/Count/index.jsx 中的内容 剪切放入 src/container/Count/index.jsx 中
   2.并删除 src/component 中的Count组件
   3.优化connect()()写法，简化mapDispatchToProps写法

   import React, { Component } from "react";
   // 引入connect用于连接UI组件与redux
   import { connect } from "react-redux";
   // 引入action
   import {
     createIncrementAction,
     createDecrementAction,
     createIncrementAsyncAction,
   } from "../../redux/count_action";
   
   class Count extends Component {
     //   加法
     increment = () => {
       const { value } = this.selectNumber;
       this.props.add(value * 1);
     };
     //   减法
     decrement = () => {
       const { value } = this.selectNumber;
       this.props.delete(value * 1);
     };
     //   奇数再加
     incrementIfOdd = () => {
       const { value } = this.selectNumber;
       if (this.props.count % 2 !== 0) {
         this.props.add(value * 1);
       }
     };
     //   异步加
     incrementAsync = () => {
       const { value } = this.selectNumber;
       this.props.addAsync(value * 1,500);
     };
     render() {
       console.log("UI组件接收到的props值：", this.props);
       return (
         <div>
           <h1>当前求和为：{this.props.count}</h1>
           <select ref={(cur) => (this.selectNumber = cur)}>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
           </select>
           &nbsp;&nbsp;
           <button onClick={this.increment}>+</button>
           &nbsp;&nbsp;
           <button onClick={this.decrement}>-</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementIfOdd}>若当前求和为奇数，再加</button>
           &nbsp;&nbsp;
           <button onClick={this.incrementAsync}>异步加</button>
         </div>
       );
     }
   }
   
   /**
    * 拆分函数写法
   // 映射状态
   const mapStateToProps = (state) => ({ count: state });
   // 映射操作状态的方法
   const mapDispatchToProps = (dispatch) => ({
     add: (data) => dispatch(createIncrementAction(data)),
     delete: (data) => dispatch(createDecrementAction(data)),
     addAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)),
   });
   
   // 使用connect()()创建并暴露一个Count的容器组件
   export default connect(mapStateToProps, mapDispatchToProps)(Count);
   */
   
   /**
    * 合并函数写法
    */
   // 使用connect()()创建并暴露一个Count的容器组件
   export default connect(
     (state) => ({ count: state }),
     // mapDispatchToProps 的一般写法
     // (dispatch) => ({
     //   add: (data) => dispatch(createIncrementAction(data)),
     //   delete: (data) => dispatch(createDecrementAction(data)),
     //   addAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)),
     // })
   
     // mapDispatchToProps 的简写
     {
       add: createIncrementAction,
       delete: createDecrementAction,
       addAsync: createIncrementAsyncAction,
     }
   )(Count);
   

2. 修改 App.jsx，无需自己给容器组件传递store

   import React, { Component } from "react";
   import Count from "./containers/Count";
   
   export default class App extends Component {
     render() {
       return (
         <div>
           <Count/>
         </div>
       );
     }
   }
   

3. 修改 index.js 文件

   1.去除store.subscribe(() => { });状态监听
   2.给<App/>包裹一个<Provider store={store}></Provider>标签
   Provider：让所有组件都可以得到state数据

   import React from "react";
   import reactDOM from "react-dom";
   import App from "./App";
   import store from "./redux/store";
   import { Provider } from "react-redux";
   reactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById("root")
   );
   

七. react-redux 数据共享（在 react-redux 的优化使用 中修改）

1. 修改 src/redux/constant.js 文件，新增常量值

   export const INCREMENT = "increment";
   export const DECREMENT = "decrement";
   export const ADD_PERSON = "add_person";
   

2. src/redux 文件夹中创建一个 actions 文件夹，将所有的 action文件 放入。在其中创建一个person 的 action文件，用于为 person组件 的 reducer服务。

   import { ADD_PERSON } from "../constant";
   
   // 创建增加一个人的action对象
   export const creactAddPersonAction = (personObj) => {
     return { type: ADD_PERSON, data: personObj };
   };
   

3. src/redux 文件夹中创建一个 reducers 文件夹，将所有的 reducers文件 放入。在其中创建一个 person 的reducers文件

   import { ADD_PERSON } from "../constant";
   // 初始化人员列表
   const initState = [{ id: 1, name: "tom", age: 20 }];
   export default function personReducer(preState = initState, action) {
     console.log('person')
     const { type, data } = action;
     switch (type) {
       // 添加
       case ADD_PERSON:
         return [data, ...preState];
       default:
         return preState;
     }
   }
   

4. 修改 store.js 文件，引入 combineReducers ，用于汇总所有的reducer，变为一个整的reducer

   /**
    * 该文件专门用于暴露一个store对象，整个应用只有一个store对象
    */
   
   // 引入createStore，专门用于创建redux中最为核心的store对象
   import { createStore, applyMiddleware,combineReducers } from "redux";
   // 引入为count组件服务的reducer
   import countReducer from "./reducers/count";
   // 引入Person组件服务的reducer
   import personReducer from './reducers/person'
   // 引入redux-thunk，用于支持异步action
   import thunk from "redux-thunk";
   
   // 汇总所有的reducer，变为一个整的reducer
   const allReducer = combineReducers({
       total:countReducer,
       persons:personReducer
   })
   const store = createStore(allReducer, applyMiddleware(thunk));
   export default store;
   

5. 新增一个 Person 组件，和Count组件通过 redux 共享数据

   取出 redux 状态时，要取到对象组件的key值

   import React, { Component } from "react";
   import { connect } from "react-redux";
   import { creactAddPersonAction } from "../../redux/actions/person";
   
   class Person extends Component {
     addPerson = () => {
       const name = this.nameNode.value;
       const age = this.ageNode.value;
       const id = this.props.personList.length + 1;
       let personObj = {
         id,
         name,
         age,
       };
       this.props.addPerson(personObj);
       this.nameNode.value = "";
       this.ageNode.value = "";
     };
     render() {
       return (
         <div>
           <h2>Person 组件</h2>
           <h4>上方Count组件的总和为：{this.props.total}</h4>
           <input
             ref={(cur) => (this.nameNode = cur)}
             type="text"
             placeholder="请输入姓名"
           />
           <input
             ref={(cur) => (this.ageNode = cur)}
             type="text"
             placeholder="请输入年龄"
           />
           <button onClick={this.addPerson}>添加</button>
           <ul>
             {this.props.personList.map((v) => {
               return (
                 <li key={v.id}>
                   姓名：{v.name},年龄：{v.age}
                 </li>
               );
             })}
           </ul>
         </div>
       );
     }
   }
   
   const mapStateToProps = (state) => ({
     personList: state.persons,
     total: state.total,
   });
   
   const mapDispatchToProps = {
     addPerson: creactAddPersonAction,
   };
   
   export default connect(mapStateToProps, mapDispatchToProps)(Person);
   

八. react-redux 总体优化（在 react-redux 数据共享 中修改）

1. 所有的变量名尽可能规范，并触发对象的简写方式
   • 汇总 reducer 时

   // 引入combineReducers，用于汇总所有的reducer
   import { combineReducers } from "redux";
   // 引入为count组件服务的reducer
   import count from "./count";
   // 引入Person组件服务的reducer
   import persons from "./person";
   // 汇总所有的reducer，变为一个整的reducer
   const allReducer = combineReducers({
     count,
     persons,
   });
   
   export default allReducer;
   

   • 组件中使用 action 方法时

   import { addPerson } from "../../redux/actions/person";
   const mapStateToProps = (state) => ({
     personList: state.persons,
     total: state.count,
   });
   
   const mapDispatchToProps = {
     addPerson,
   };
   
   export default connect(mapStateToProps, mapDispatchToProps)(Person);
   

2. reducer文件夹中，新增一个index.js文件，专门用于汇总并暴露所有的reducer

   /**
    * 该文件用于汇总所有的reducer为一个总的reducer
    */
   // 引入combineReducers，用于汇总所有的reducer
   import { combineReducers } from "redux";
   // 引入为count组件服务的reducer
   import count from "./count";
   // 引入Person组件服务的reducer
   import persons from "./person";
   // 汇总所有的reducer，变为一个整的reducer
   const allReducer = combineReducers({
     count,
     persons,
   });
   
   export default allReducer;
   

   store.js 文件中使用

   // 引入汇总之后的reducer
   import allReducer from "./reducers";
   
   const store = createStore(
     allReducer,
     applyMiddleware(thunk)
   );
   export default store;
   

九. react-redux 开发者工具的使用

1. 浏览器拓展程序引入 Redux DevTools
   

2. 项目中安装 redux-devtools-extension
yarn add redux-devtools-extension

3. 配置store.js文件

   // 引入 redux-devtools-extension
   import { composeWithDevTools } from "redux-devtools-extension";
   const store = createStore(
       allReducer,
       composeWithDevTools(applyMiddleware(thunk))
   );
   

十. react-redux 正规使用流程

1. 准备工作，创建 redux 所需文件

src 文件夹下创建一个 redux 文件夹
redux 文件夹下创建 actions 文件夹、reducers 文件夹、constans.js 文件、store.js 文件
reducers 文件夹下创建 index.js 文件

redux 文件层级：

- src
  - redux
    - actions
	- reducers
	  - index.js
	- constans.js
	- store.js

• actions 文件夹：
  用于为组件生成 action 对象。
• reducers 文件夹：
  （1）用于创建一个组件服务的 reducer，reducer 的本质是一个函数。
  （2）reducer 函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）。
• reducers/index.js 文件：
  该文件用于汇总所有的 reducer 为一个总的 reducer 。
• constans.js 文件：
  （1）用于定义 action 对象中 type 类型的常量值。
  （2）目的只有一个：便于管理的同时防止程序员单词写错。
• store.js 文件：
  该文件专门用于暴露一个 store 对象，整个应用只有一个store 对象。

2. 安装 redux 所需的依赖，编写基础代码

1. 安装 redux
   用于创建redux中最为核心的store对象
   yarn add redux react-redux
2. 安装 redux-thunk
   用于支持异步 action
   yarn add redux-thunk
3. 安装 redux-devtools-extension
   用于支持 react-redux 开发者工具的使用
   yarn add redux-devtools-extension

• src/redux/reducers/index.js 文件修改

  // 引入combineReducers，用于汇总所有的reducer
  import { combineReducers } from "redux";
  
  // 汇总所有的reducer，变为一个整的reducer
  const allReducer = combineReducers({
  
  });
  
  export default allReducer;
  

• src/redux/store.js 文件修改

  // 引入createStore，专门用于创建redux中最为核心的store对象
  import { createStore, applyMiddleware } from "redux";
  // 引入redux-thunk，用于支持异步action
  import thunk from "redux-thunk";
  // 引入 redux-devtools-extension
  import { composeWithDevTools } from "redux-devtools-extension";
  // 引入汇总之后的reducer
  import allReducer from "./reducers";
  
  const store = createStore(
    allReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );
  export default store;
  

• src/index.js 文件修改

  import React from "react";
  import ReactDOM from "react-dom/client";
  import App from "./App";
  import reportWebVitals from "./reportWebVitals";
  import { Provider } from "react-redux";
  import store from "./redux/store";
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      {/* 此处需要用 Provider 包裹 App，目的是让 App 所有的后代容器组件都能接收到store */}
      {/* 可代替下方 store.subscribe()，实现自动监听 */}
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  );
  // 监测redux中状态的改变， 若redux中的状态发生了改变，则重新渲染App组件
  // store.subscribe(() => {
  //   root.render(
  //     <React.StrictMode>
  //       <App />
  //     </React.StrictMode>
  //   );
  // });
  reportWebVitals();
  

3. 编写组件功能

组件的写法有两种： 类组件 和 函数组件
下面分别讲一下 rudex 在 类组件 和 函数组件 中的写法

connect 写法：

export default connect(
    (state) => ({ key: value }),//映射状态
    { key: action方法, }//映射操作状态的方法
)(UI组件);

3.1 类组件 与 函数组件 写法

3.1.1 类组件中写法

import React, { Component } from "react";
import { connect } from "react-redux";

export class index extends Component {
  render() {
    return <div>index</div>;
  }
}
/**
 * 映射状态，组件中需要使用的 reducer 状态
 * state.xxx  key 对应 src/redux/reducers/index.js 中 allReducer 对应组件的 key
 */
const mapStateToProps = (state) => ({});
// 映射操作状态的方法，组件中需要使用的事件方法
const mapDispatchToProps = {};
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(index);

3.1.2 函数组件中写法

import React from "react";
import { connect } from "react-redux";

export const index = (props) => {
  // props 等同于 类组件中的 this.props
  return <div>index</div>;
};

/**
 * 映射状态，组件中需要使用的 reducer 状态
 * state.xxx  key 对应 src/redux/reducers/index.js 中 allReducer 对应组件的 key
 */
const mapStateToProps = (state) => ({});
// 映射操作状态的方法，组件中需要使用的事件方法
const mapDispatchToProps = {};
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(index);

3.2 组件中使用实例

分别在类组件、函数组件中 使用redux

3.2.1 Count 组件（类组件写法）

实现一个数值 加减 的组件（Count 组件）

1. src/redux/constants.js 文件修改，添加方法常量

   // 定义action对象中type类型的常量值
   export const INCREMENT = "increment";
   export const DECREMENT = "decrement";
   

2. src/redux/actions 文件夹新增 count.js，对应 Count 组件 的 action

   import { INCREMENT, DECREMENT } from "../constants.js";
   
   // 加
   // 简写方式
   // export const increment = (data) => ({ type: INCREMENT, data });
   // 正常方式
   export const increment = (data) => {
     return {
       type: INCREMENT,
       data,
     };
   };
   // 减
   export const decrement = (data) => {
     return {
       type: DECREMENT,
       data,
     };
   };
   

3. src/redux/reducers 文件夹新增 count.js，对应 Count 组件 的 reducer

   /**
    * 1. 该文件是用于创建一个为为Count组件服务的reducer,reducer的本质是一个函数
    * 2. reducer函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）
    */
   import { DECREMENT, INCREMENT } from "../constants.js";
   
   const initState = 0; //初始化状态
   // 当第一次 preState 为 undefined 时，preState 赋值等于 initState
   export default function increment(preState = initState, action) {
     // 从 action 对象中获取：type,data
     const { type, data } = action;
     // 根据 type 决定加工数据
     switch (type) {
       case INCREMENT:
         return preState + data;
       case DECREMENT:
         return preState - data;
       default:
         return preState;
     }
   }
   

4. src/redux/reducers/index.js 文件修改，添加合并 Count 组件 的 reducer
   

5. Count 组件中 引入 connect 生成一个容器组件，并暴露。通过this.props....读取和操作状态。

   容器组件写法：

   export default connect(
       (state) => ({ key: value }),//映射状态
       { key: action方法, }//映射操作状态的方法
   )(UI组件);
   

   import React, { Component } from "react";
   import { connect } from "react-redux";
   import { increment, decrement } from "../../redux/actions/count";
   
   class Count extends Component {
     incrementNumber = () => {
       this.props.increment(1);
     };
     decrementNumber = () => {
       this.props.decrement(1);
     };
     render() {
       console.log(this.props);
       return (
         <div>
           <h4>当前数值：{this.props.num}</h4>
           <button onClick={this.incrementNumber}>+1</button>
           <button onClick={this.decrementNumber}>-1</button>
         </div>
       );
     }
   }
   /**
    * 映射状态，组件中需要使用的 reducer 状态
    * state.xxx  key 对应 src/redux/reducers/index.js 中 allReducer 对应组件的 key
    */
   const mapStateToProps = (state) => ({ 
     num: state.count 
   });
   // 映射操作状态的方法，组件中需要使用的事件方法
   const mapDispatchToProps = {
     increment,
     decrement,
   };
   // 使用connect()()创建并暴露一个Count的容器组件
   export default connect(mapStateToProps, mapDispatchToProps)(Count);
   

3.2.2 Persons 组件（函数组件写法）

实现一个人员信息列表 新增 功能（Persons 组件）
步骤同 3.1 Conut 组件实例 相同

1. src/redux/constants.js 文件修改，添加方法常量

   // 定义action对象中type类型的常量值
   export const INCREMENT = "increment";
   export const DECREMENT = "decrement";
   
   export const ADD_PERSON = "add_person";
   

2. src/redux/actions 文件夹新增 persons.js，对应 Persons 组件 的 action

   import { ADD_PERSON } from "../constants.js";
   
   // 新增人员
   export const addPerson = (data) => ({ type: ADD_PERSON, data });
   

3. src/redux/reducers 文件夹新增 persons.js，对应 Persons 组件 的 reducer

   import { ADD_PERSON } from "../constants.js";
   
   const initState = [
     {
       id: 1,
       name: "小明",
       age: 18,
     },
   ];
   export default function addPerson(preState = initState, action) {
     const { type, data } = action;
     // 根据 type 决定加工数据
     switch (type) {
       case ADD_PERSON:
         return [data, ...preState];
       default:
         return preState;
     }
   }
   

4. src/redux/reducers/index.js 文件修改，添加合并 Persons 组件 的 reducer
   

5. Persons 组件 中 引入 connect 生成一个容器组件，并暴露。通过props....读取和操作状态。

   import React from "react";
   import { useRef } from "react";
   import { connect } from "react-redux";
   // 引入 action
   import { addPerson } from "../../redux/actions/persons.js";
   
   export const Persons = (props) => {
     // props 等同于 类组件中的 this.props
     console.log(props);
     const nameRef = useRef();
     const ageRef = useRef();
     function add() {
       const name = nameRef.current.value;
       const age = ageRef.current.value * 1;
       const personObj = {
         id: props.personList.length + 1,
         name,
         age,
       };
       props.addPerson(personObj);
     }
   
     return (
       <div>
         <input ref={nameRef} type="text" placeholder="请输入姓名" />
         &nbsp;
         <input ref={ageRef} type="number" placeholder="请输入年龄" />
         &nbsp;
         <button onClick={add}>添加</button>
         <ul>
           {props.personList.map((v) => {
             return (
               <li key={v.id}>
                 姓名：{v.name}，年龄：{v.age}
               </li>
             );
           })}
         </ul>
       </div>
     );
   };
   
   /**
    * 映射状态，组件中需要使用的 reducer 状态
    * state.xxx  xxx 对应 src/redux/reducers/index.js 中 allReducer 对应组件的 key
    */
   const mapStateToProps = (state) => ({
     personList: state.persons,
   });
   // 映射操作状态的方法，组件中需要使用的事件方法
   const mapDispatchToProps = {
     addPerson,
   };
   // 使用connect()()创建并暴露一个Persons的容器组件
   export default connect(mapStateToProps, mapDispatchToProps)(Persons);
   

3.2.3 Count组件 和 Persons 组件 相互通信

1. Count组件

   mapStateToProps 中映射 Person组件 的状态
   
   render() 中渲染
   

2. Persons组件

   mapStateToProps 中映射 Count组件 的状态
   
   视图渲染：
   

3.2.4 页面展示

文章来源地址https://www.toymoban.com/news/detail-469659.html

到了这里，关于React - redux 使用（由浅入深）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！