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
原文地址:https://www.cnblogs.com/yunshangwuyou/p/9504355.html