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, { Pure***ponent } from 'react'
import { connect } from 'react-redux'
export class About extends Pure***ponent {
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, { Pure***ponent } from 'react'
import { connect } from 'react-redux'
import { changeNumAction } from '../store/actionCreators'
export class About extends Pure***ponent {
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)