您当前的位置: 首页 > 技术文章 > 移动开发

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

作者: 时间:2022-10-13阅读数:人阅读

react-redux库使用Redux

上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码

但是实际上redux官方帮助我们提供了 react-redux 的库,这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用,并且实现的逻辑会更加的严谨和高效

这篇我们就可以使用react-redux库将上一篇文章的计数器案例进行优化

安装react-redux: yarn add react-reduxnpm 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)

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦