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

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)