《React基础》React-Redux

射手和农场主 發表於 2019-12-20 09:32:00

<div id="output_wrapper_id" class="output_wrapper" style="font-size: 15px; color: rgba(62, 62, 62, 1); line-height: 1.8; word-spacing: 2px; letter-spacing: 2px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center">
<blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(0, 0, 0, 1); border-left: 5px solid rgba(239, 112, 96, 1); background: rgba(239, 235, 233, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
作者：水涛 追求技术，但又不失生活的乐趣，过自己想要的生活

</blockquote>
<h3 id="hreactredux" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">React-Redux简介</h3>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">
React-Redux可以使你的React项目拥有全局数据，可以使多个React组件读取到全局数据并且组件中也可修改它。
</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">
React-Redux你可以理解为Vue中的Vuex,也是一种全局状态（不懂Vue的这条略过）。
</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">
React-Redux由store、action构建函数、reducer组成。store负责维护全局状态，action构建函数负责创建action对象，reducer处理action对象并更新store。
</li>

</ul>
<h3 id="hreactredux-1" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">React-Redux安装</h3>
打开vscode终端中输入：<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">npm install --save--dev react-redux redux</code> 回车即可下载安装 本文中的ReactRedux版本信息如下 React-Redux版本为：7.1.3 Redux版本为：4.0.4
<h3 id="h" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">概念铺垫</h3>
<h4 id="hreact" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">React中的组件分为两种：</h4>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">显示组件：只显示数据，没有业务逻辑。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">容器组件：有state状态，有业务逻辑。</li>

</ul>
<h4 id="h-1" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">显示组件示例：</h4>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">function Show(props){    return (       <div>          <div>姓名：{props.name}</div>          <div>性别：{props.sex}</div>       </div>    ); } </code></pre>
<h4 id="h-2" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">容器组件示例：</h4>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">class ShowContainer extends Component{    constructor(props)    {       super(props);       this.state={         name:"微差",         sex:"男"       };    }    render()    {      let {name,sex} = this.state;      return <Show name={name} sex={sex}/>;    } } </code></pre>
<blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(0, 0, 0, 1); border-left: 5px solid rgba(239, 112, 96, 1); background: rgba(239, 235, 233, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
可以看到容器组件中渲染的是显示组件,显示组件的一切数据来源于容器组件
</blockquote>
<h3 id="h-3" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">创建容器组件</h3>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">引入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">React-Redux</code>中的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">connect</code>函数，用它创建容器组件</li>
</ul>
<h4 id="h-4" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">创建容器组件代码如下</h4>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">/*引入connect函数*/ import {connect} from "react-redux"; /*声明Show组件*/ function Show(props){    return (       <div>          <div>姓名：{props.name}</div>          <div>性别：{props.sex}</div>       </div>    ); } function mapStateToProps(state){    if (typeof state == "undefined") return { name: "", sex: "" };    return {      name:state.name,      sex:state.sex    }; } /*action构造函数*/ function onChangeName(data){    return {      type:"NAME",      data:data    }; } function mapDispatchToProps(dispatch){    return{       onChangeName:(data)=>{dispatch(onChangeName(data));}    }; } /*创建容器组件*/ let Container = connect(mapStateToProps,mapDispatchToProps)(Show); </code></pre>
<h4 id="h-5" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">代码解析：</h4>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">从<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">React-Redux</code>中引入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">connect</code>函数。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">声明函数组件<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>——用于展示数据。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">编写<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapStateToProps</code>函数：参数是容器组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">state</code>对象，用于将容器组件（在例子中是Container）的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">state</code>对象值映射到对应显示组件（在例子中是Show组件）的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">props</code>属性上，因此后续<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>组件可以通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">props.name</code>直接获取到容器组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">state.name</code>。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">编写<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">onChangeName</code>函数：创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">action</code>对象,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">action</code>对象中必须存在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">type</code>属性，否则报错。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">编写<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapDispatchToProps</code>函数：函数的第一个参数是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">dispatch</code>函数,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapDispatchToProps</code>函数返回一个对象，对象的每一个属性都是一个函数，函数最终调用了<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">dispatch</code>方法，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">dispatch</code>方法中传入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">action</code>对象，当调用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">dispatch</code>时会触发<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>中的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">reducer</code>函数，对<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>进行更新。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">调用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">connect</code>生成容器组件：使用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">connect</code>函数,传入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapStateToProps</code>与<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapDispatchToProps</code>函数作为参数，此时会返回一个函数，继续将<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>组件传入，最终生成了一个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>组件的容器组件，此时，这个容器组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">state</code>将会按照<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapStateToProps</code>函数的映射方式与<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">props</code>进行一一对应，并且<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">props</code>中拥有<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapDispatchToProps</code>中映射的函数，可以在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Show</code>组件中调用以更新<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>，容器组件就像我开头铺垫的一样，在页面使用容器组件，实际渲染的是显示组件。</li>
</ul>
<blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(0, 0, 0, 1); border-left: 5px solid rgba(239, 112, 96, 1); background: rgba(239, 235, 233, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
到这一步，我们已经生成了容器组件，并且能够在显示组件中显示容器组件的state数据，并且能够修改store。那么问题来了，容器组件的state用什么设置呢？怎么创建store啊？下面，666了。
</blockquote>
<h3 id="hstore" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">创建store</h3>
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">引入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">redux</code>中的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">createStore</code>函数，通过它创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code></li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0"><code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">createStore</code>需要一个函数作为参数，这个参数就是reducer，reducer就是一个函数</li>
</ul>
<h4 id="hstore-1" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; font-size: 1.2em">创建store对象代码如下：</h4>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">/*引入createStore*/ import {createStore} from "redux"; /*声明一个reducer函数，并设置state的默认值*/ const reducer = function(state={name:"",sex:""},action){     switch(action.type)     {        case"NAME":           return {name:action.data};        break;        case"SEX":           return {age:action.data};        break;     } }; /*创建store对象*/ let store = createStore(reducer); </code></pre>
<blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(0, 0, 0, 1); border-left: 5px solid rgba(239, 112, 96, 1); background: rgba(239, 235, 233, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
reducer函数的第一个参数可以设置全局state对象的默认值，第二个参数就是action构建函数返回的对象了，reducer根据<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">action.type</code>做出不同的操作，最终返回的对象会与当前全局state进行合并，从而达到更新store的效果
</blockquote>
<h3 id="hprovider" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">使用Provider使组件得到全局数据</h3>
<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>组件会让所有被它包裹的子孙容器组件拿到它的store属性中的state作为本身的state对象，因此只需要创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>并传给<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>属性，让<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>作为父元素包裹容器组件就OK了，容器组件的state就有了。
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">引入<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">React-Redux</code>中的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>组件</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code></li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">将<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>作为<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>属性传入</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">把容器组件包裹在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">Provider</code>下，容器组件的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">state</code>便得到了store中的数据，并且映射给了显示组件，显示组件就可以显示全局数据了，显示组件中调用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">mapDispatchToProps</code>中映射的方法便可修改全局数据</li>
</ul>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">import {Provider} from "react-redux"; import {createStore} from "redux"; /*编写reducer*/ const reducer=(state={name:"微差",sex:"男"},action)=>{    switch(action.type)     {        case"NAME":           return {name:action.data};        break;        case"SEX":           return {sex:action.data};        break;     } }; /*创建store*/ let store = createStore(reducer); ReactDOM.render(   <Provider store={store}>     <Container/>     </Provider> ,document.getElementById("root")); </code></pre>
<h3 id="hdemo" style="color: inherit; line-height: inherit; padding: 0; margin: 1.6em 0; font-weight: bold; border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em"><span style="font-size: inherit; line-height: inherit; margin: 0 3px 0 0; display: inline-block; font-weight: normal; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px">最终DEMO</h3>
<pre><code class="javascript language-javascript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; overflow-x: auto; padding: 0.5em; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">/*引入必要函数*/ import {connect,Provider} from "react-redux"; import {createStore} from "redux"; import {render} from "react-dom"; /*声明显示组件*/ function Show(props){    /*调用onChangeName修改全局数据*/    function change(){      props.onChangeName("change");    }    return (       <div>          <div>姓名：{props.name}</div>          <div>性别：{props.sex}</div>          <input value="改变名称" type="button" onClick={change} ></input>       </div>    ); } /*编写映射props函数*/ function mapStateToProps(state){    if (typeof state == "undefined") return { name: "", sex: "" };    return {      name:state.name,      sex:state.sex    }; }; /*action构造函数*/ function onChangeName(data){    return {      type:"NAME",      data:data    }; }; /*编写映射dispatch函数*/ function mapDispatchToProps(dispatch){    return{       onChangeName:(data)=>{dispatch(onChangeName(data));}    }; }; /*创建容器组件*/ let Container = connect(mapStateToProps,mapDispatchToProps)(Show); /*声明一个reducer函数，并设置state的默认值*/ const reducer = function(state={name:"",sex:""},action){     switch(action.type)     {        case"NAME":           return {name:action.data};        break;        case"SEX":           return {sex:action.data};        break;     } }; /*创建store对象*/ let store = createStore(reducer); render(<Provider store={store}>   <Container/> </Provider>,document.getElementById("root")); </code></pre>
<blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(0, 0, 0, 1); border-left: 5px solid rgba(239, 112, 96, 1); background: rgba(239, 235, 233, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
运行一下看看，点击按钮，将改变名称
</blockquote>
到这里，一个最简单的原理性的Demo就完成了。
<ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0 0 0 32px; list-style-type: disc">
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">Container容器组件通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">connect(mapStateToProps,mapDispatchToProps)(Show)</code>方法生成。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">Container组件会渲染Show组件。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">Show组件的props属性与Container组件的state的映射关系由mapStateToProps与mapDispatchToProps配置。</li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">createStore</code>创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>——<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">createStore(reducer)</code></li>
<li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 0.5em; padding: 0">设置Provider的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; color: rgba(248, 35, 117, 1); background: rgba(248, 248, 248, 1)">store</code>，并将Container放置在Provider元素下，Container便能得到Provider中的store作为自己的state，完成映射，因此，connect中配置的映射也可以理解为与store的映射</li>
</ul>
</div> 
来源：https://www.cnblogs.com/shuitao/p/12071422.html

頁: [1]

琼殿技术论坛's Archiver

《React基础》React-Redux