react-redux使用及简析-灵析社区

react-redux是一个用于在React应用中使用Redux的库。它提供了一些工具和API，帮助我们将Redux与React组件无缝集成在一起.

1. react-redux的使用

// Provider组件：React-Redux提供了一个名为Provider的组件，将Redux的store传递给React应用的所有组件。通过在应用的根组件中使用Provider组件，我们可以确保所有的组件都能够访问到Redux的store。
import { Provider } from 'react-redux';
import Counter1 from './components/Counter1'
import Counter2 from './components/Counter2'
import store from './store';
createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <Counter1 />
    <hr />
    <Counter2 />
  </Provider>);

// connect函数：React-Redux提供了一个名为connect的函数，将Redux的状态和操作映射到React组件的props上。通过使用connect函数，我们可以将Redux的状态和操作与React组件进行绑定，从而实现组件的响应式更新。
import actionCreators from '../store/actionCreators/counter1';
import { connect } from 'react-redux';
class Counter1 extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.number}</p>
        <button onClick={this.props.add1}>+</button>
      </div >
    )
  }
}
//把仓库中的状态映射为组件的属性对象 仓库到组件的输出
const mapStateToProps = state => state.counter1;
const mapDispatchToProps = dispatch => bindActionCreators(actionCreators, dispatch)
export default connect(
  mapStateToProps,
  mapDispatchToProps //组件的输出，在组件里派发动作，修改仓库
)(Counter1);

hooks：React-Redux还提供了一些hooks，比如useSelector和useDispatch。这些hooks可以帮助我们在函数组件中使用Redux的状态和操作，而不需要使用connect函数

2. 使用useSelector useDispatch 替代connect;

使用useSelector和useDispatch可以替代connect函数，用于在函数组件中使用Redux的状态和操作。

import { useSelector } from 'react-redux';

const MyComponent = () => {
  const state = useSelector((state) => state.myReducer);
  // 使用state进行组件的渲染和逻辑处理
  return (
    // JSX代码
  );
};
// 使用useSelector选择了Redux状态树中的myReducer状态，并将其赋值给state变量。然后，我们可以使用state变量进行组件的渲染和逻辑处理

// useDispatch是另一个React-Redux提供的hook，它可以用于获取Redux的dispatch函数。通过使用useDispatch，我们可以在函数组件中触发Redux的action，从而改变状态。
import { useDispatch } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();
  // 使用dispatch触发Redux的action
  const handleClick = () => {
    dispatch({ type: 'INCREMENT' });
  };
  return (
    // JSX代码
     <button onClick={handleClick}>+</button>
  );
};
// 使用useDispatch获取Redux的dispatch函数，并将其赋值给dispatch变量。然后，我们可以在组件中使用dispatch触发Redux的action，从而改变状态。

通过使用useSelector和useDispatch，我们可以在函数组件中更方便地使用Redux的状态和操作，而不需要使用connect函数。这样可以简化代码，提高开发效率，并且更符合React的函数式编程风格。

需要注意的是:使用useSelector和useDispatch时，确保在组件的顶层使用Provider组件来提供Redux的store。这样才能让组件正确地访问到Redux的状态和操作。

import React from 'react'
import { useStore } from 'react-redux'

export const EComponent = ({ value }) => {
  const store = useStore()

  return <div>{store.getState().todos.length}</div>
}

3. react-redux中Provider和connect原理简析

// Provider和connect使用React.createContext()来管理状态，在connect组件中订阅subscribe，订阅仓库中的的状态变化事件，当仓库中的状态发生改变后重新用新的映射状态进行setState，去更新组件。
const ReactReduxContext = React.createContext(null);
function Provider(props) {
    return (
        <ReactReduxContext.Provider value={{ store: props.store }}>
            {props.children}
        </ReactReduxContext.Provider>
    )
}
//connect(mapStateToProps,mapDispatchToProps)(Counter1);
function connect(mapStateToProps, mapDispatchToProps) {
    return function (OldComponent) {
        return class extends React.Component {
            static contextType = ReactReduxContext;//context获取的另外一种方法，可以不适用Consumer来包裹。
            constructor(props, context) {//this.context
                super(props);
                const { store } = context;
                const { getState, subscribe, dispatch } = store;
                //先获取仓库中的总状态{counter1:{number:1},counter2:{number:2}}
                this.state = mapStateToProps(getState());
                //订阅仓库中的的状态变化事件，当仓库中的状态发生改变后重新用新的映射状态进行setState
                this.unsubscribe = subscribe(() => {
                    this.setState(mapStateToProps(getState()));
                });

                let dispatchProps;
                //如果说mapDispatchToProps是一个函数的话，传入dispatch
                if (typeof mapDispatchToProps === 'function') {
                    dispatchProps = mapDispatchToProps(dispatch);
                } else {//如果它是一个对象的话，使用bindActionCreators，并传入dispatch。
                    dispatchProps = bindActionCreators(mapDispatchToProps, dispatch);
                }
                this.dispatchProps = dispatchProps;
            }
            componentWillUnmount() {
                this.unsubscribe();
            }
            render() {
                return (
                    <OldComponent {...this.props}  {...this.state} {...this.dispatchProps} />
                )
            }
        }
    }
}