zoukankan      html  css  js  c++  java
  • Redux的学习1

    1、是什么?

    类似于vuex是做状态管理的

    2、store对象

     3、如何创建store对象

     4、action的理解:代表一个行为,一个操作,例如增删改查

     4、reducer

     5、store

     

     6、

    应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。

    惟一改变 state 的办法是触发 action,一个描述发生什么的对象。 为了描述 action 如何改变 state 树,你需要编写 reducers

    就是这样!

    import { createStore } from 'redux'
    
    /**
     * 这是一个 reducer,形式为 (state, action) => state 的纯函数。
     * 描述了 action 如何把 state 转变成下一个 state。
     *
     * state 的形式取决于你,可以是基本类型、数组、对象、
     * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
     * 当 state 变化时需要返回全新的对象,而不是修改传入的参数。
     *
     * 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper)
     * 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。
     */
    function counter(state = 0, action) {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1
        case 'DECREMENT':
          return state - 1
        default:
          return state
      }
    }
    
    // 创建 Redux store 来存放应用的状态。
    // API 是 { subscribe, dispatch, getState }。
    let store = createStore(counter)
    
    // 可以手动订阅更新,也可以事件绑定到视图层。
    store.subscribe(() => console.log(store.getState()))
    
    // 改变内部 state 惟一方法是 dispatch 一个 action。
    // action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
    store.dispatch({ type: 'INCREMENT' })
    // 1
    store.dispatch({ type: 'INCREMENT' })
    // 2
    store.dispatch({ type: 'DECREMENT' })
    // 1

    用switch case是为了将action与字符串对应起来

    7、工作图

  • 相关阅读:
    二分图的匹配(未完) yongmou
    树型动态规划 yongmou
    最大堆 yongmou
    C/C++ 编程环境搭建与配置 eclipse + cdt + MinGW yongmou
    ACM必备(学完一个就加亮一个)不多,就这些! yongmou
    joj 2558 Ocean Currents 特别的广搜 yongmou
    Android:自定义对话框
    ubuntu升级11.10后ADT无法安装解决办法
    处理GridView数据源(DataTable)为空行(转)
    ASP.NET无法连接到SQL Server的问题
  • 原文地址:https://www.cnblogs.com/carry-2017/p/11738800.html
Copyright © 2011-2022 走看看