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

react-redux的基本使用

基本使用

1、下载react-redux和redux

bash 复制代码

yarn add react-redux redux

2、创建Store

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

3、引入Store

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

javascript 复制代码

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组件作为参数，最终完成映射操作。

javascript 复制代码

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.props
    return (
      <div>
        年龄{age}
        <button onClick={this.addAge}>增加+</button>
      </div>
    )
  }
  addAge = () => {
    const { addAgeProp, age } = this.props
    addAgeProp(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。

javascript 复制代码

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函数需要大量的代码和深入的理解。

javascript 复制代码

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的更新。

javascript 复制代码

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
}

总结

connect主要是将需要的state和dispatch方法映射到props上，然后在componentDidMount中订阅Store的变化用于setState来更新界面，最后在componentWillMount中取消订阅。【步骤与redux的基本使用类似】

而useSelector则是在useEffect中完成订阅变化和取消订阅。

无论是connect还是useSelector，都是结合自身特点来暂存state（connect用组件state，函数组件用useState），用于订阅变化中的更新视图，同样都会取消订阅。