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)