React-Redux的使用 _使用

学向勤中得，萤窗万卷书。这篇文章主要讲述React-Redux的使用相关的知识，希望能为你提供帮助。
当前使用 Redux 存在的问题：

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

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

使用 React-Redux

React-Redux 概述

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

【React-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& nbsp; ReactDOM& nbsp; from& nbsp; & #39; react-dom& #39; ;
import& nbsp; React& nbsp; from& nbsp; & #39; react& #39; ;
import& nbsp; App& nbsp; from& nbsp; & #39; ./App& #39; ;
import& nbsp; BrowserRouter& nbsp; from& nbsp; & #39; react-router-dom& #39; ;
import& nbsp; Provider& nbsp; from& nbsp; & #39; react-redux& #39; ;
import& nbsp; store& nbsp; from& nbsp; & quot; ./store/store& quot; ;

ReactDOM.render(
& nbsp; & nbsp; & nbsp; & nbsp; & lt; Provider& nbsp; store=store& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; BrowserRouter& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; App/& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /BrowserRouter>
& nbsp; & nbsp; & nbsp; & nbsp; & lt; /Provider> ,
& nbsp; & nbsp; & nbsp; & nbsp; document.getElementById(& #39; root& #39; )
);

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

const& nbsp; mapStateToProps& nbsp; =& nbsp; (state)& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; return& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; count:& nbsp; state.count
& nbsp; & nbsp; & nbsp; & nbsp;
;

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

const& nbsp; mapDispatchToProps& nbsp; =& nbsp; (dispatch)& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; return& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; increment()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dispatch(addAction(1));
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp;
;

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

class& nbsp; Home& nbsp; extends& nbsp; React.PureComponent& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; render()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; (
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; div& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; p& gt; this.props.count& lt; /p>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; button& nbsp; onClick=()& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; this.props.increment()
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & gt; 递增
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /button>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /div>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp;

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

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

最终 Home.js 组件代码如下

import& nbsp; React& nbsp; from& nbsp; & #39; react& #39; ;
import& nbsp; connect& nbsp; from& nbsp; & #39; react-redux& #39;
import& nbsp; addAction& nbsp; from& nbsp; & #39; ../store/action& #39; ;

class& nbsp; Home& nbsp; extends& nbsp; React.PureComponent& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; render()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; (
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; div& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; p& gt; this.props.count& lt; /p>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; button& nbsp; onClick=()& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; this.props.increment()
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & gt; 递增Home
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /button>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /div>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp;

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