zoukankan      html  css  js  c++  java
  • redux与react-redux

    Redux是一个数据状态管理插件,论是移动端还是 pc 端,当你使用 React 或者 vue 开发组件化的 SPA 程序时,
    组件之间共享信息是一个非常大的问题。在react开发中,使用 React 开发系统,绝大部分都需要结合 Redux 来使用。
    第一步安装
    安装redux的时候,我们经常也会安装react-redux。

    第二步redux的使用方法
    Redux设计理念: Redux 是一个管理数据的工具,我们创建一个store变量用来管理数据。而这个store不是凭空创建的,创建它的前提是,得设定一个管理规则。
    以上代码中,我们的管理规则是:数据(即state)默认是 0,传入INCREMENT就加一,传入DECREMENT就减一 。创建store用来管理数据,具体的管理形式是什么呢?
    第一,要通过一个函数来触发数据的变化,即dispatch,触发的时候一定要符合之前定制的规则,否则无效。第二,数据一旦发生变化时,会导致怎样后果,即subscribe中
    定义的函数会执行。第三,如何取得当前的数据,即store.getState()。这个就是普通的发布和订阅的设计模式,也是js种惯用的设计模式。
    还有一点特别要注意,即在规则函数中,数据变化时要return一个新的值,而不是直接修改原来的值。
    具体内容见下图

    Redux 和 React 一般是结合使用的,那他们是如何集成的呢?
    第一步:创建 store

    第二步:创建规则
    使用 Redux 时,刚才提到的“规则”被称作reducer。
    先看userinfo.js的代码

    再看index.js的代码

    第三步:创建 action
    在实际的应用中,我们需要用一些函数将它分装起来,即./app/actions中的文件,虽然此处只有userinfo.js这一个文件。在userinfo.js中,我们把每个业务操作都分装为一个
    函数,该函数接收data,然后再根据 reducer 的规则对 data 进行分装,最后返回。当然,最后返回的结果肯定还是会交给dispatch来处理,

    第四步: 结合到 React
    在./app/index.js中创建store并传递给组件,然后让组件作为所有组件的根节点。

    然后看./containers/Hello.jsx,在Hello组件中通过this.props.userinfo和this.props.userinfoActions即可获取数据和 actions

    获取了数据和 actions 该怎么用呢?我们将它们传递给子组件,A和B组件负责展示数据,C组件负责触发actions。

    现在我们可以运行我们的项目了,见下图

    点击修改按钮
    页面会变化为

    在react-redux的项目中,action是一个对象,其中type属性是必须的,reducer是一个函数,它接受一个state和一个action,
    根据action的type返回一个新的state。store是个对象,里面存放着数据,它有自己的一些方法,用来获取、更新数据等。

    本博客升华自:大众点评app视频。
    完整的demo见github:https://github.com/JserJser/reactWebApp/tree/master/react-redux。

  • 相关阅读:
    装饰模式(Decorator Pattern)
    适配器模式(Adapter Pattern)
    组合模式
    单例的两种模式
    抽象工厂模式(Abstract Factory Pattern)
    工厂方法模式
    桥接模式
    原型模式(Prototype Pattern)
    建造者模式(Builder Pattern)
    解决使用tomcat服务器发布web项目时出现URL中文乱码的问题
  • 原文地址:https://www.cnblogs.com/smart-girl/p/9684442.html
Copyright © 2011-2022 走看看