redux学习笔记（二）——react-redux基础知识

﹏ヽ暗。殇╰゛Y 2022-08-30 11:21 308阅读 0赞

### 目录 ###

*  一、前言
 *  二、react-redux基础
 *   *  2.1 react-redux简介
     *  2.2 Provider标签
     *  2.3 connect
 *  三、Show me the code
 *   *  3.1 新建项目
     *  3.2 安装依赖
     *  3.3 添加reducer
     *  3.4 添加store
     *  3.5 修改index.js
     *  3.6 完成按钮组件
     *  3.7 完成计数器显示组件
     *  3.8 将组件添加到app.js中

# 一、前言 #

[上一节——redux基础知识][redux]中介绍了`redux`的基本使用。

但是在实际react项目中使用`redux`的话，一般不会使用原生`redux`，而是会再加上`react-redux`一起使用。

`redux`与`react-redux`并没有什么关系，`redux`可以在任意地方使用，可以在`react`项目中使用，也可以在`vue`项目中使用，甚至可以在`jQuery`项目中使用。而`react-redux`是redux官方做的用于更好地与`react`进行配合。

这一节，将会在前一节`redux`的基础上，使用`react-redux`来让我们的组件更丝滑。

# 二、react-redux基础 #

## 2.1 react-redux简介 ##

`react-redux`可以理解为是`redux`关于`react`项目的高级语法糖，他并不是`redux`，只是让你的`redux`代码在`react`项目中更丝滑。

`react-redux`中有两个重要的成员：

*  Provider
 *  connect

下面将会详细介绍一下这两部分。

## 2.2 Provider标签 ##

`Provider`是一个标签，他是一个`react-redux`封装的标签，用来包裹根组件用的，他的作用就是可以让你的整个应用都能随时随地的拿到`store`中的`state`。

`Provider`标签有一个参数，`props`参数需要将`store`传递进去，然后通过context往下传递，使每个组件都能拿到`store`。

*  在app.js中引入Provider

import {  Provider } from 'react-redux';

*  Provider包裹根节点

import {  Provider } from 'react-redux';
    
    ReactDOM.render(
      <Provider>
        <App />
      </Provider>
    );

*  给Provider传入store

import {  Provider } from 'react-redux';
    import store from './store';
    
    ReactDOM.render(
      <Provider props={ store}>
        <App />
      </Provider>
    );

## 2.3 connect ##

虽然根节点外使用了`Provider`标签进行了包裹，但是`Provider`只是提供一个将`store`往下传递的能力，想要使用到`store`中的数据，就**必须**使用`connect()`方法对组件进行包裹（加强）。

*  导入connect方法

import {  connect } from 'react-redux';

*  connect的使用：

**注意：调用connect()方法将会返回另一个方法，此时再将组件作为参数传入该方法进行包裹。**

import {  connect } from 'react-redux';
    // 引入组件
    import ComA from './ComA';
    
    // 使用connect包裹组件
    connect()(ComA);

这里使用了**函数柯里化**的概念，这种写法常用的地方是在*工厂函数*，如果有了解过`express`/`koa`/`egg.js`中间件的写法，应该就会对该种写法比较熟悉。

前面一部分`connect()`通过传入参数具体定制工厂函数的工作逻辑/模式，并返回一个函数，然后再将需要传入工厂函数的参数传入，运行工厂函数。

这里第一部分`connect()`方法的参数如下（按顺序）：

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mapstateToProps(state, ownProps)</td> 
   <td>Function</td> 
   <td>该函数会将store的数据绑定到组件上。<br> <code>state</code>: redux中的store <br><code>ownProps</code>: 组件自己的props</td> 
  </tr> 
  <tr> 
   <td>mapDispatchToProps(dispatch, ownProps)</td> 
   <td>Function</td> 
   <td>该函数返回一个对象，该对象的每个属性就是一个action，会将这些action作为props绑定到组件上。<br><code>dispatch</code>: 就是store.dispatch<br><code>ownProps</code>: 组件自己的props</td> 
  </tr> 
  <tr> 
   <td>mergeProps(stateProps, dispatchProps, ownProps)</td> 
   <td>Function</td> 
   <td>不管是<code>stateProps</code>还是<code>dispatchProps</code>，都需要和<code>ownProps</code> merge之后才会被赋给我们的组件，通常情况下，你可以不传这个参数，connect就会使用<code>object.assign</code>替代该方法</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>Object</td> 
   <td>connect的其他配置项</td> 
  </tr> 
 </tbody> 
</table>

其中，`mapstateToProps`和`mapDispatchToProps`是需要特别掌握的，这两个在开发过程中使用的频率最高也是最重要的部分。

*  加上connect参数的写法

import {  connect } from 'react-redux';
    import ComA from './ComA';
    
    // 定义mapstateToProps
    const mapstateToProps = (state, ownProps) => { 
      // ...
    }
    
    // 定义mapDispatchToProps
    const mapDispatchToProps = (dispatch, ownProps) => { 
      // ...
    }
    
    // 使用connect包裹组件
    connect(mapstateToProps, mapDispatchToProps)(ComA);

其实也想把`mapstateToProps`和`mapDispatchToProps`使用示例贴上来，但是好像脱离实际使用的这部分代码反而让人看得云里雾里的。不如我们直接上项目吧。

# 三、Show me the code #

本项目还是用一个计数器来进行展示吧。包含两个组件

*  按钮组件：包含【+】和【-】按钮，点击按钮，显示组件显示内容也会随之改变
 *  显示组件：负责显示当前计数，默认值为0

## 3.1 新建项目 ##

老样子，还是使用`CRA`工具来创建一个react项目：

# 创建项目
    npx create-react-app react_redux_demo
    
    # 进入项目目录
    cd react_redux_demo

## 3.2 安装依赖 ##

所需安装的依赖有两个：

*  redux
 *  react-redux

npm i redux react-redux --save

## 3.3 添加reducer ##

和上一节一样的操作，在`src`目录下添加一个文件夹`src/reducer`，里面新建一个`index.js`文件。

*  `src/reducer/index.js`文件内容

// 设置一个默认的state
    const initState = { 
      value: 0
    };
    
    const reducer = (state = initState, action) => { 
      switch(action.type) { 
        case 'add':
          return {  value: state.value + 1 };
        case 'decrese':
          return {  value: state.value - 1 };
        default:
          return state;
      }
    }
    
    export default reducer;

## 3.4 添加store ##

和上一节一样的操作，在`src`目录下添加一个文件夹`src/store`，里面新建一个`index.js`文件。

*  `src/store/index.js`文件内容

import {  createStore } from 'redux';
    
    import reducer from '../reducer';
    
    const store = createStore(reducer);
    
    export default store;

## 3.5 修改index.js ##

因为根节点是在`src/index.js`文件中，所以直接到这里来进行一个`Provider`的包裹就行。当然，`src/app.js`中包裹也是没有问题的，但是要保证你的`Provider`标签把你要用到`store`的部分完全包裹起来。

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    // 导入Provider
    import {  Provider } from 'react-redux';
    
    // 导入store
    import store from './store';
    
    // 使用Provider标签包裹根组件
    ReactDOM.render(
      <Provider store={ store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

## 3.6 完成按钮组件 ##

按钮组件包含以下几部分：

*  包含【+】和【-】按钮
 *  点击按钮，显示组件显示内容也会随之改变（修改`store`）

在`src`目录下新建一个`Components/Button`文件夹，并在其下创建`index.js`文件夹

*  `src/Components/Button/index.js`文件基本内容

function Button(props) { 
      return (
        <>
          <button> + </button>
          <br />
          <button> - </button>
        </>
      );
    }
    
    export default Button;

*  使用connect对组件进行包裹/增强

import {  connect } from 'react-redux';
    
    function Button(props) { 
      return (
        <>
          <button> + </button>
          <br />
          <button> - </button>
        </>
      );
    }
    
    // 定义mapDispatchToProps
    const mapDispatchToProps = (dispatch) => { 
      
      // 返回一个对象，该对象每个方法就是一个action，所有的这些action都将绑定到组件的props参数上
      return { 
        add: () => { 
          dispatch({  type: 'add' });
        },
        decrese: () => { 
          dispatch({  type: 'decrese' });
        }
      };
    };
    
    // 使用connect包裹/增强组件
    // 这里不需要该组件获取store中的值，故第一个参数mapstateToProps就无需定义
    export default connect(null, mapDispatchToProps)(Button);

*  绑定按钮点击事件

import {  connect } from 'react-redux';
    
    function Button(props) { 
      // 计数+1事件
      const addHandler = () => { 
        props.add();
      };
    
      // 计数-1事件
      const decreseHandler = () => { 
        props.decrese();
      };
    
      return (
        <>
          <button onClick={ addHandler}> + </button>
          <br />
          <button onClick={ decreseHandler}> - </button>
        </>
      );
    }
    
    // 定义mapDispatchToProps
    const mapDispatchToProps = (dispatch) => { 
      
      // 返回一个对象，该对象每个方法就是一个action，所有的这些action都将绑定到组件的props参数上
      return { 
        add: () => { 
          dispatch({  type: 'add' });
        },
        decrese: () => { 
          dispatch({  type: 'decrese' });
        }
      };
    };
    
    // 使用connect包裹/增强组件
    // 这里不需要该组件获取store中的值，故第一个参数mapstateToProps就无需定义
    export default connect(null, mapDispatchToProps)(Button);

## 3.7 完成计数器显示组件 ##

该组件只包含一个功能：

*  显示当前计数

首先，在`src`目录下新建一个`Components/Counter`文件夹，并在其下创建`index.js`文件夹

*  `src/Components/Counter/index.js`文件基本内容

function Counter(props) { 
      return (
        <div></div>
      );
    }
    
    export default Counter;

*  使用`connect`包裹/增强组件

import {  connect } from 'react-redux';
    
    function Counter(props) { 
      return (
        <div>{ props.value}</div>
      );
    }
    
    // 定义mapstateToProps，直接将state进行返回
    const mapstateToProps = (state) => { 
      return state;
    };
    
    // 使用connect包裹/增强组件
    // 该组件不需要发送action，所以无需传入mapDispatchToProps参数
    export default connect(mapstateToProps)(Counter);

## 3.8 将组件添加到app.js中 ##

在`src/app.js`中，添加上述完成的两个组件：

import Button from './Components/Button';
    import Counter from './Components/Counter';
    
    
    function App() { 
      return (
        <div className="App">
          <Button />
          <Counter />
        </div>
      );
    }
    
    export default App;

至此，一个完整的计数器就完成了。

*  [源码地址][Link 1]

[redux]: https://blog.csdn.net/fd214333890/article/details/118856732?spm=1001.2014.3001.5501
[Link 1]: https://github.com/brick9527/demos/tree/main/redux_study/react_redux