• react的Redux基础


       redux的中文文档:http://www.redux.org.cn/

       redux的英文官网:https://redux.js.org/

       redux相当于vuex



    Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览。
    Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有2kB,包括依赖)。

    开发起始

         Redux 的开发最早开始于我在准备 React Europe 演讲热加载与时间旅行的时候,当初的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,因此才得以实现日志打印,热加载,时间旅行,同构应用,录制和重放,而不需要任何开发参与。

         Redux 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。 不管你有没有使用过它们,只需几分钟就能上手 Redux。

    安装(稳定版):
       redux:cnpm install redux -S; 

     notic:以上基于使用 npm 来做包管理工具的情况下。 

    安装附加包:

       npm install --save react-redux

       pm install --save-dev redux-devtools

    结构有actions,store,reducer,组件;

    1.store:存放管理全局数据的state的仓库

    2.reducer:
    (1)、是一个纯函数:有固定的输入,有固、定的输出

    (2)、根据actions事件处理得到一个新的actions和新的state;
    (3)、reducer不能操作state,需要把state深拷贝出来
    3.组件通过getState获得数据(是一个对象)
    定义一个action,必须拥有type值,其他值自定义

     

    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
  • 相关阅读:
    android selector失效的原因
    Android TabActivity使用方法
    Android Build.VERSION.SDK_INT兼容介绍
    数组与指针
    字符串与字符串函数
    C控制语句:分支和跳转
    C控制语句:循环
    运算符、表达式、语句
    select
    正则验证数字
  • 原文地址:https://www.cnblogs.com/yunshangwuyou/p/9504355.html
Copyright © 2020-2023  润新知