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)

* 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。

, action) {

switch (action.type) {

case 'INCREMENT':

;

case 'DECREMENT':

;

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

巴特西

react的Redux基础

最新文章

热门文章