React中使用Redux (二) - 通过react-redux库连接React和Redux

约定不等于承诺〃 2023-10-02 20:58 31阅读 0赞

#### react-redux库使用Redux ####

> 上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码
> 
> 但是实际上redux官方帮助我们提供了 react-redux 的库，这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效
> 
> 这篇我们就可以使用react-redux库将上一篇文章的计数器案例进行优化

**安装react-redux: `yarn add react-redux`或`npm i react-redux`**

**使用react-redux这个库分成两个步骤**

> 步骤一: react-redux库只需要提供一次store, 我们在index.js中为App根组件提供store, 方式如下:

// index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    // 引入Provider和store
    import {
         Provider } from 'react-redux';
    import store from './store';
    
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    root.render(
      // 在Provider声明要提供哪一个store
      <Provider store={
        store}>
        <App/>
      </Provider>
    );

> 步骤二: 在要使用store的地方, 通过`connect`函数将组件和store连接起来
> 
> > connect函数是一个高阶函数, 该函数返回一个高阶组件, 而高阶组件又是一个函数, 所以我们通常见到connect函数是这样调用的`connect(fn1, fn2)(组件)`
> > 
> > store中的状态可能是非常多的, 而connect函数的参数的作用是, 要将store中的哪些数据或者方法映射过去, 我们就可以根据自己的需求, 决定映射过去哪些数据, 而不是直接将整个store映射过去(*使用方式如下*)

**connect高阶函数接收两个参数**:

> **参数一**: 接收一个函数fn1, 要求fn1返回一个对象, 对象中存放要映射的数据; 同时在回调fn1函数时, 会将state传到fn1中
> 
> 映射到组件中的数据是通过`this.props`获取的

import React, {
         PureComponent } from 'react'
    import {
         connect } from 'react-redux'
    
    export class About extends PureComponent {
        
      render() {
        
        // 在props中获取到映射过来的数据
        const {
         counter } = this.props
    
        return (
          <div>
            <h2>About</h2>
            <h2>当前计数: {
        counter}</h2>
          </div>
        )
      }
    }
    
    // 回调mapStateToProps时会传递过来state
    const mapStateToProps = (state) => ({
        
      // 表示将counter数据映射过去, 当然还可以映射其他的数据
      counter: state.counter
    })
    
    // 表示将数据映射到About组件中
    export default connect(mapStateToProps)(About)

> **参数二**: 参数二也是接收一个参数fn2, 要求fn2也是返回一个对象, 对象中的属性同样会映射到props中去; 不同于fn1的是, 该对象中存放的全部都是函数; 并且在回到时将dispatch传入到fn2中
> 
> 我们一般在参数二中映射的是dispatch派发action的操作

import React, {
         PureComponent } from 'react'
    import {
         connect } from 'react-redux'
    import {
         changeNumAction } from '../store/actionCreators'
    
    export class About extends PureComponent {
        
      changeNum(num) {
        
        // 调用映射到props的方法
        this.props.changeNumber(num)
      }
    
      render() {
        
        const {
         counter } = this.props
    
        return (
          <div>
            <h2>About</h2>
            <h2>当前计数: {
        counter}</h2>
            <button onClick={
        () => this.changeNum(10)}>+10</button>
            <button onClick={
        () => this.changeNum(-10)}>-10</button>
          </div>
        )
      }
    }
    
    const mapStateToProps = (state) => ({
        
      counter: state.counter
    })
    
    // 回调mapDispatchToProps时会传递过来dispatch
    const mapDispatchToProps = (dispatch) => ({
        
      // 表示映射到组件props的方法
      changeNumber(num) {
        
        dispatch(changeNumAction(num))
      }
    })
    
    // 表示将数据映射到About组件中
    export default connect(mapStateToProps, mapDispatchToProps)(About)