zoukankan      html  css  js  c++  java
  • react-redux基本概念和API

    首先这下面的资料来源于:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

    直接引用对学习没有多大好处,一点一点的复制过来的.要学习的同学可以去原址查看.以下是我记录的东西

    一:Store

    Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。

    Redux 提供createStore这个函数,用来生成 Store。

    二:State

    Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。

    当前时刻的 State,可以通过store.getState()拿到。

    Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么样,反之亦然。

    三:Action

    State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。

    Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置,社区有一个规范可以参考

    const action = {
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    };

    上面代码中,Action 的名称是ADD_TODO,它携带的信息是字符串Learn Redux

    可以这样理解,Action 描述当前发生的事情。改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。

    View 要发送多少种消息,就会有多少种 Action。如果都手写,会很麻烦。可以定义一个函数来生成 Action,这个函数就叫 Action Creator。

    function addTodo(text) {
      return {
        type: ADD_TODO,
        text
      }
    }

    四: store.dispatch()

    store.dispatch()是 View 发出 Action 的唯一方法。

    store.dispatch(addTodo('Learn Redux'));

    五:Reducer

    Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

    Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

    六:纯函数

    使用原则:

    • 不得改写参数
    • 不能调用系统 I/O 的API
    • 不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果

    七:store.subscribe()

    只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)放入listen,就会实现 View 的自动渲染。Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。

  • 相关阅读:
    C#中的委托和事件的使用
    C#中Attribute/特性的使用
    Eclipase + CDT
    设计模式总结
    Nginx源码编译
    Nginx自定义扩展模块
    电池的寿命
    大盗阿福
    河中跳房子
    An Easy Problem
  • 原文地址:https://www.cnblogs.com/dragonh/p/6774493.html
Copyright © 2011-2022 走看看