如何使用React-redux

react-redux是一个第三方库，可以帮我们更好的使用redux。

react-redux 核心api：

• Provider
• 高阶函数connect

使用react-redux可以简化为3个步骤

1. 安装react-redux

# install
yarn add react-redux
# or
npm i react-redux -S

2. 用Provider包裹<App/>根组件, 将store传给Provider

Provider和store作了关联，Provider把store提供给了它内部的所有组件，换句话说Provider内部的组件都有能力获取store里面的数据。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './global.css';
import App from './App';
import { Provider } from 'react-redux';
import store from "./store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

2. 用connect去连接store

connect就像一根数据线可以连接store, 将store里的属性和方法映射到props上，从而暴露给组件使用

• connect(mapStateToProps, mapDispatchToProps)(Component):mapStateToProps,mapDispatchToProps可以看实际情况传递，不想传的话可以设为null

一个简单的demo:

import { memo } from "react";
import { connect } from "react-redux";

const  Home= memo((props) => {
    //可以通过props拿到connet暴露出来的属性和方法
    return (
        <div>
           Home Container
        </div>
    )
})

const mapStateToProps = state =>({
})

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps,mapDispatchToProps)(Home)

声明

需要注意的是react18提供了2个hook(useDispatch, useSelector)，可以让我们更方便的连接store，从而告别繁琐的connect方法

import { memo } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

//memo高阶组件包裹起来的组件有对应的特点：只有props发生改变时，才会重新渲染
const Test = memo((props) => {
    // 1. 使用useSlector将redux中store里的数据映射到组件内
    // 2. useSelector 捕获的是state 只要state发生改变 组件就会重新渲染
    const { count } = useSelector( state => ({
        // count: state.counter.count
    }), shallowEqual) //shallowEqual浅比较

    //2.使用dispatch直接派发action
    const dispatch = useDispatch()

    return (
        <div>
            <h3>{ count }</h3>
            {/*<button onClick={ e => dispatch(addNumberAction(1)) }>+1</button>*/}
            {/*<button onClick={ e => dispatch(subNumberAction(1)) }>-1</button>*/}
        </div>
    )
})

export default Test