React-Redux的使用

Posted 2022-06-01 qq628b229e2808e

当前使用 Redux 存在的问题：

• 冗余代码太多, 每次使用都需要在构造函数中获取 Redux 存储的内容
• 每次使用都需要监听和取消监听
• 操作 store 的代码过于分散

如何解决冗余代码太多问题

• 使用 React-Redux

React-Redux 概述

• React-Redux 是 Redux 官方的绑定库, 能够让我们在组件中更好的读取和操作 Redux 中保存的状态

官方文档地址：​​https://react-redux.js.org/introduction/quick-start​​

使用 React-Redux

• 安装 React-Redux

npm install react-redux

根据官方文档介绍，我们需要利用一个 Provider 包裹我们的根组件也就是 App.js 只要利用 Provider 将祖先组件包裹起来, 并且通过 Provider 的 ​​store​​​ 属性将 Redux 的 ​​store​​​ 传递给 ​​Provider​​, 那么就可以在所有后代中直接使用 Redux 了。

• 修改 App.js

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import BrowserRouter from 'react-router-dom';
import Provider from 'react-redux';
import store from "./store/store";

ReactDOM.render(
    <Provider store=store>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

• 在​​mapStateToProps​​​ 方法中告诉​​React-Redux​​​, 需要将​​store​​​ 中保存的哪些数据映射到当前组件的​​props​​ 上

const mapStateToProps = (state) => 
    return 
        count: state.count
    
;

• 在​​mapDispatchToProps​​​ 方法中告诉​​React-Redux​​​, 需要将哪些派发的任务映射到当前组件的​​props​​ 上

const mapDispatchToProps = (dispatch) => 
    return 
        increment() 
            dispatch(addAction(1));
        
    
;

• 通过 props 来使用 redux 中保存的数据

class Home extends React.PureComponent 
    render() 
        return (
            <div>
                <p>this.props.count</p>
                <button onClick=() => 
                    this.props.increment()
                >递增
                </button>
            </div>
        )
    

• 最后在导出组件的时候使用​​connect​​ 进行关联起来

export default connect(mapStateToProps, mapDispatchToProps)(Home);

• 最终 Home.js 组件代码如下

import React from 'react';
import connect from 'react-redux'
import addAction from '../store/action';

class Home extends React.PureComponent 
    render() 
        return (
            <div>
                <p>this.props.count</p>
                <button onClick=() => 
                    this.props.increment()
                >递增Home
                </button>
            </div>
        )
    


const mapStateToProps = (state) => 
    return 
        count: state.count
    
;
const mapDispatchToProps = (dispatch) => 
    return 
        increment() 
            dispatch(addAction(1));
        
    
;
export default connect(mapStateToProps, mapDispatchToProps)(Home);