作者:水涛
追求技术,但又不失生活的乐趣,过自己想要的生活

React-Redux简介

  • React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修改它。

  • React-Redux你可以理解为Vue中的Vuex,也是一种全局状态(不懂Vue的这条略过)。

  • React-Redux由storeaction构建函数reducer组成。store负责维护全局状态,action构建函数负责创建action对象,reducer处理action对象并更新store。

React-Redux安装

打开vscode终端中输入:npm install --save--dev react-redux redux 回车即可下载安装
本文中的ReactRedux版本信息如下
React-Redux版本为:7.1.3
Redux版本为:4.0.4

概念铺垫

React中的组件分为两种:

  • 显示组件:只显示数据,没有业务逻辑。
  • 容器组件:有state状态,业务逻辑。

显示组件示例:

function Show(props){
   return (
      <div>
         <div>姓名:{props.name}</div>
         <div>性别:{props.sex}</div>
      </div>
   );
}

容器组件示例:

class ShowContainer extends Component{
   constructor(props)
   {
      super(props);
      this.state={
        name:"微差",
        sex:"男"
      };
   }    render()
   {
     let {name,sex} = this.state;
     return <Show name={name} sex={sex}/>;
   }
}

可以看到容器组件中渲染的是显示组件,显示组件的一切数据来源于容器组件

创建容器组件

  • 引入React-Redux中的connect函数,用它创建容器组件

创建容器组件代码如下

/*引入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);

代码解析:

  • React-Redux中引入connect函数。
  • 声明函数组件Show——用于展示数据。
  • 编写mapStateToProps函数:参数是容器组件的state对象,用于将容器组件(在例子中是Container)state对象值映射到对应显示组件(在例子中是Show组件)props属性上,因此后续Show组件可以通过props.name直接获取到容器组件的state.name
  • 编写onChangeName函数:创建action对象,action对象中必须存在type属性,否则报错。
  • 编写mapDispatchToProps函数:函数的第一个参数是dispatch函数,mapDispatchToProps函数返回一个对象,对象的每一个属性都是一个函数,函数最终调用了dispatch方法,dispatch方法中传入action对象,当调用dispatch时会触发store中的reducer函数,对store进行更新。
  • 调用connect生成容器组件:使用connect函数,传入mapStateToPropsmapDispatchToProps函数作为参数,此时会返回一个函数,继续将Show组件传入,最终生成了一个Show组件的容器组件,此时,这个容器组件的state将会按照mapStateToProps函数的映射方式与Show组件的props进行一一对应,并且props中拥有mapDispatchToProps中映射的函数,可以在Show组件中调用以更新store,容器组件就像我开头铺垫的一样,在页面使用容器组件,实际渲染的是显示组件。

到这一步,我们已经生成了容器组件,并且能够在显示组件中显示容器组件的state数据,并且能够修改store。那么问题来了,容器组件的state用什么设置呢?怎么创建store啊?下面,666了。

创建store

  • 引入redux中的createStore函数,通过它创建store
  • createStore需要一个函数作为参数,这个参数就是reducerreducer就是一个函数

创建store对象代码如下:

/*引入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);

reducer函数的第一个参数可以设置全局state对象的默认值,第二个参数就是action构建函数返回的对象了,reducer根据action.type做出不同的操作,最终返回的对象会与当前全局state进行合并,从而达到更新store的效果

使用Provider使组件得到全局数据

Provider组件会让所有被它包裹的子孙容器组件拿到它的store属性中的state作为本身的state对象,因此只需要创建store并传给Providerstore属性,让Provider作为父元素包裹容器组件就OK了,容器组件的state就有了。

  • 引入React-Redux中的Provider组件
  • 创建store
  • store作为Provider组件的store属性传入
  • 把容器组件包裹在Provider下,容器组件的state便得到了store中的数据,并且映射给了显示组件,显示组件就可以显示全局数据了,显示组件中调用mapDispatchToProps中映射的方法便可修改全局数据
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"));

最终DEMO

/*引入必要函数*/
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"));

运行一下看看,点击按钮,将改变名称

到这里,一个最简单的原理性的Demo就完成了。

  • Container容器组件通过connect(mapStateToProps,mapDispatchToProps)(Show)方法生成。
  • Container组件会渲染Show组件。
  • Show组件的props属性与Container组件的state的映射关系由mapStateToProps与mapDispatchToProps配置。
  • 通过createStore创建store——createStore(reducer)
  • 设置Provider的store,并将Container放置在Provider元素下,Container便能得到Provider中的store作为自己的state,完成映射,因此,connect中配置的映射也可以理解为与store的映射

[修仙之路]React-Redux 金丹篇的更多相关文章

  1. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  2. 《带你装B,带你飞》pytest修仙之路5 - yield操作

    1. 简介 上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现.fixture通过scope参数控制setup级别,既然 ...

  3. 运维(SA)修仙 之路

    运维(SA)修仙 之路: 大纲: 系统 ,网络 ,数据库,开发 系统 :linux(cent OS && ubuntu)  网络 :路由,防火墙,安全  数据库:mysql, mong ...

  4. 《带你装B,带你飞》pytest修仙之路3 - setup/teardown

    1. 简介 学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次.当然还有更高级一点的setupClass和teardownClass ...

  5. LazyCoder修仙之路

    本人不才,没有高文凭,茹果本人的修仙[开发]之路能 ,走的很远,后来的人能看的上我 作品,有不足,和不对,帮帮我完善和理解.这也是我 学习笔记把!

  6. oo修仙之路

    写在前面: 之前听说过oo这门课的威力,计院全体修仙现场的图也被转了不知多少遍,然而自己不亲身经历就不知这门课的难度所在.每次debug时耳边总会想起三国杀里面周瑜的话"挣扎吧,在血和暗的深 ...

  7. 程序员修仙之路--优雅快速的统计千万级别uv(留言送书)

    菜菜,咱们网站现在有多少PV和UV了? Y总,咱们没有统计pv和uv的系统,预估大约有一千万uv吧 写一个统计uv和pv的系统吧 网上有现成的,直接接入一个不行吗? 别人的不太放心,毕竟自己写的,自己 ...

  8. 程序员修仙之路- CXO让我做一个计算器!!

    菜菜呀,个税最近改革了,我得重新计算你的工资呀,我需要个计算器,你开发一个吧 CEO,CTO,CFO于一身的CXO X总,咱不会买一个吗? 菜菜 那不得花钱吗,一块钱也是钱呀··这个计算器支持加减乘除 ...

  9. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

随机推荐

  1. 0xe7f001f0!?NDK调试过程,无故抛出SIGSEGV。

    arm调试过程,如果抛一个SIGSEGV,地址在 0xe7f001f0 附近,原因居然是因为我在调试.当我使用n指令跳到下一行代码时,往往变成了continue指令一样地执行.还不确定地抛出SIGSE ...

  2. firefox浏览器中使用vux的x-input报错TypeError: _this3.$refs.input.scrollIntoViewIfNeeded is not a function

    最近做公众号项目,想着统一风格,所以决定使用vux. 在调试时发现,只要鼠标点击x-input输入框,就会报错 TypeError: _this3.$refs.input.scrollIntoView ...

  3. Oracle 环境配置

    一.首先要查看IP地址是否配置成功,网络是否连接 [root@admin ~]# ifconfig | head -2 若不成功,打开配置文件: vi /etc/sysconfig/network-s ...

  4. [apue] 神奇的 Solaris pipe

    说到 pipe 大家可能都不陌生,经典的pipe调用配合fork进行父子进程通讯,简直就是Unix程序的标配. 然而Solaris上的pipe却和Solaris一样是个奇葩(虽然Solaris前途黯淡 ...

  5. Android中常见的设计模式

    前言: Android开发的设计模式,基本设计思想源于java的设计模式,java的设计模式有N多种,据不完全统计,迄今为止,网络出现最频繁的大概有23种.Java只是一门开发语言,学会并掌握这门语言 ...

  6. 扛把子组20191107-8 beta week 2/2 Scrum立会报告+燃尽图 07

    此作业的要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9960 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...

  7. Linux配置SSH和Xshell连接服务器

    >>>>>Ubuntu安装和配置ssh教程 SSH分为客户端 openssh-client 和服务器 openssh-server,可以利用以下命令确认电脑 上是否安装了 ...

  8. Siamese-RPN论文阅读

    https://www.cnblogs.com/zhengyuqian/p/10609737.html

  9. Java Web登录界面

    非常激动的开通了我的第一个博客,在这里希望大家能多多指点,相互学习. 一个简单的登录界面 首先我们先把这个登录分为三块: 一.数据库 数据库我用的是MYSQL: 二.前端 三.后台 1.  后台代码的 ...

  10. 【2018寒假集训 Day2】【动态规划】又上锁妖塔

    又上锁妖塔 (tower.in/tower.out) [题目描述] 小D在X星买完了想要的东西,在飞往下一个目的地的途中,正无聊的他转头看了看身边的小A,发现小A正在玩<仙剑>,可是小A很 ...