redux

redux

https://redux.js.org/

A predictable state container for JavaScript apps.

 

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

https://redux.js.org/introduction/motivation

Motivation

As the requirements for JavaScript single-page applications have become increasingly complicated, our code must manage more state than ever before. This state can include server responses and cached data, as well as locally created data that has not yet been persisted to the server. UI state is also increasing in complexity, as we need to manage active routes, selected tabs, spinners, pagination controls, and so on.

https://www.redux.org.cn/

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (若是你须要一个 WordPress 框架，请查看 Redux Framework。)

可让你构建一致化的应用，运行于不一样的环境（客户端、服务器、原生应用），而且易于测试。不只于此，它还提供 超爽的开发体验，好比有一个时间旅行调试器能够编辑后实时预览。

Redux 除了和 React 一块儿用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

 

应用中全部的 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 

 

 

工做流程

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

首先，用户发出 Action。

store.dispatch(action); 

而后，Store 自动调用 Reducer，而且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action); 

State 一旦有变化，Store 就会调用监听函数。

 // 设置监听函数 store.subscribe(listener); 

listener能够经过store.getState()获得当前状态。若是使用的是 React，这时能够触发从新渲染 View。

function listerner() { let newState = store.getState(); component.setState(newState); } 

 

 与flux相比

与flux相比， flux要是写应用须要在各个组件都添加代码 dispatch store view

http://www.ruanyifeng.com/blog/2016/01/flux.html

redux 只须要定义一个 redux存储器， 定义reducer，state相应action转换器， 替代了 flux的dispatcher和store角色。

 

什么是reducer

https://www.ibm.com/developerworks/cn/web/wa-manage-state-with-redux-p1-david-geary/index.html

 

Redux 是 Facebook 的 Flux 架构的一种简化实现。（Redux 既是一个表示 “已返回” 的英文单词，也是 reducer + flux 的混合词。）Flux 在本质上采用了模型-视图-控制器 (MVC) 的结构，但引入了很高的复杂性。Redux 从 Elm 借用了缩减程序 (reducer) 的概念来下降了这一复杂性，Elm 是一个基于不可变数据结构和纯函数的强大的反应式函数编程语言。纯函数是没有反作用的函数，Redux 缩减程序是计算应用程序状态的纯函数。

Redux 有 3 条原则：

• 应用程序状态存储在单个对象中。
• 应用程序状态不可变，只能经过描述状态更改的操做 完全替换。
• 缩减程序根据当前状态和某个操做来建立下一个状态。

 

 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

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

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

const reducer = function (state, action) {  // ... return new_state; }; 

 

reducer为缩径器， 将 state + action 序列的宽度， 缩减（映射为）为 state 单个序列。

为何这个函数叫作 Reducer 呢？由于它能够做为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序做为一个数组。

const actions = [ { type: 'ADD', payload: 0 }, { type: 'ADD', payload: 1 }, { type: 'ADD', payload: 2 } ]; const total = actions.reduce(reducer, 0); // 3 

上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数做为参数，就能够直接获得最终的状态3。

 

 

https://cn.bing.com/dict/search?q=reducer&FORM=BDVSP2&qpvt=reducer

• 渐缩管；减压阀；退黏剂；【化】还原器
• 网络异径管；减速机；大小头

减速器;减压器

2.

稀释剂

3.

异径管节

4.

异径接头

5.

节流器

6.

锥形管

7.

收缩管

8.

减薄液

9.

缩小物

10.

渐缩管;减压阀;退黏剂;【化学】还原器,还原剂;【摄影】减薄剂

 

 

API

https://redux.js.org/api/api-reference

Top-Level Exports

• createStore(reducer, [preloadedState], [enhancer])
• combineReducers(reducers)
• applyMiddleware(...middlewares)
• bindActionCreators(actionCreators, dispatch)
• compose(...functions)

 

Store API

• Store
  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)