React-React-Redux的使用

当前使用 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);