react(2) - react-redux的基本使用

react-redux的基本使用

基本使用

1、下载react-redux和redux

yarn add react-redux redux

2、创建Store

按照上一篇文章中redux的基本使用创建redux有关的四个文件。

3、引入Store

在index.js中，从react-redux中引入Provider组件，包裹根组件，并且将Store传递给Provider

import { Store } from './redux'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(// 将store传入context,这样任何组件都能访问Store,而不需要在组件中手动引入Store<Provider store={Store}><App /></Provider>
)

4.1、类组件中使用

从react-redux中引入connect，定义两个映射函数，分别将需要的state和dispatch方法映射到组件props上。connect第一次执行返回一个高阶组件，接收react组件作为参数，最终完成映射操作。

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { changeAge_action } from './redux/actionCreators'
export class About extends PureComponent {render() {const { age } = this.propsreturn (<div>年龄{age}<button onClick={this.addAge}>增加+</button></div>)}addAge = () => {const { addAgeProp, age } = this.propsaddAgeProp(age + 1)}
}
//将state中的age映射到props上，如果不需要映射state可以将mapStateToProps设置为null
const mapStateToProps = (state) => ({ age: state.age })
//将dispatch方法映射到props上
const mapDispatchToProps = (dispatch) => ({addAgeProp(newAge) {dispatch(changeAge_action(newAge))}
})export default connect(mapStateToProps, mapDispatchToProps)(About)

4.2函数组件的使用

在函数组件中我们不需要引入connect，而是使用useSelector和useDispatch。

useSelector：这个Hook可以让你在函数组件中直接访问Redux store的state。你可以将一个选择函数传递给useSelector，这个选择函数接收整个state作为参数，返回你想要的state的部分。当这部分state发生改变时，组件会重新渲染。
useDispatch：这个Hook返回store的dispatch函数，你可以使用它来dispatch action。

import React, { PureComponent } from 'react'
// import { connect } from 'react-redux'  //不需要引入connect了
import { changeAge_action } from './redux/actionCreators'
import { useDispatch, useSelector } from 'react-redux'
export function About() {const dispatch = useDispatch()const age = useSelector((state) => state.age)function addAge() {dispatch(changeAge_action(age + 1))}return (<div>年龄{age}<button onClick={addAge}>增加+</button></div>)
}export default About

探究下connect、useSelector在做什么

在这里我们借助ai工具，让他为我们实现简易版本的connect和useSelector来帮助我们理解他们的原理。

connect

connect函数的实现涉及到React和Redux的许多细节，包括如何订阅和取消订阅Redux store的更新，如何将props、dispatch和state传递给组件等。因此，实现一个完整的connect函数需要大量的代码和深入的理解。

import React from 'react'
import { store } from './store' // 假设你的Redux store在这个文件中function connect(mapStateToProps, mapDispatchToProps) {return function(WrappedComponent) {return class extends React.Component {state = {storeState: mapStateToProps(store.getState())}componentDidMount() {this.unsubscribe = store.subscribe(() => {this.setState({storeState: mapStateToProps(store.getState())})})}componentWillUnmount() {this.unsubscribe()}render() {return (<WrappedComponent{...this.props}{...this.state.storeState}{...mapDispatchToProps(store.dispatch)}/>)}}}
}

在这个简化版的connect函数中，我们首先定义了一个返回高阶组件的函数。这个高阶组件在挂载时订阅store的更新，并在卸载时取消订阅。当store的state发生改变时，我们使用mapStateToProps函数来选择新的state，并使用setState方法来更新组件的state，这会触发组件的重新渲染。我们还使用mapDispatchToProps函数来将dispatch方法映射到props，这样，WrappedComponent就可以通过props来dispatch action了。

useSelector

在这个简化版的useSelector中，我们首先使用useState来保存选择的state。然后，我们使用useEffect来订阅store的更新。当store的state发生改变时，我们使用选择函数来选择新的state，并使用useState的setter函数来更新state，这会触发组件的重新渲染。当组件卸载时，我们取消订阅store的更新。

import { useEffect, useState } from 'react'
import { store } from './store' // 假设你的Redux store在这个文件中function useSelector(selector) {const [selectedState, setSelectedState] = useState(selector(store.getState()))useEffect(() => {const unsubscribe = store.subscribe(() => {const newState = selector(store.getState())setSelectedState(newState)})// 当组件卸载时，取消订阅return unsubscribe}, [selector])return selectedState
}