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