Redux 中文文檔

jopen 9年前發布 | 171K 次閱讀 Redux JavaScript開發

在線 Gitbook 地址：http://camsong.github.io/redux-in-chinese/

英文原版：http://rackt.github.io/redux/

我們正在進行 React Router 中文文檔 翻譯工作，歡迎加入我們

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

可以讓你構建一致化的應用，運行于不同的環境（客戶端、服務器、原生應用），并且易于測試。不僅于此，它還提供超爽的開發體驗，比如有一個時間旅行調試器可以編輯后實時預覽。

Redux 除了和 React 一起用外，還支持其它界面庫。
它體小精悍（只有2kB）且沒有任何依賴。

評價

“Love what you’re doing with Redux”
Jing Chen，Flux 作者

“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher，Flux 作者

“It's cool that you are inventing a better Flux by not doing Flux at all.”
André Staltz，Cycle 作者

</blockquote>

開發經歷

Redux 的開發最早開始于我在準備 React Europe 演講熱加載與時間旅行的時候，當初的目標是創建一個狀態管理庫，來提供最簡化 API，但同時做到行為的完全可預測，因此才得以實現日志打印，熱加載，時間旅行，同構應用，錄制和重放，而不需要任何開發參與。

啟示

Redux 由 Flux 演變而來，但受 Elm 的啟發，避開了 Flux 的復雜性。
不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。

安裝

安裝穩定版： 

npm install --save redux

多數情況下，你還需要使用 React 綁定庫和開發者工具。 

npm install --save react-redux
npm install --save-dev redux-devtools

要點

應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中。
惟一改變 state 的辦法是觸發 action，一個描述發生什么的對象。
為了描述 action 如何改變 state 樹，你需要編寫 reducers。

就是這樣！ 

import { createStore } from 'redux'; /**


    

  • 這是一個 reducer，形式為 (state, action) => state 的純函數。
    • 

  • 描述了 action 如何把 state 轉變成下一個 state。
*
    • 

  • state 的形式取決于你，可以是基本類型、數組、對象、
    • 

  • 甚至是 Immutable.js 生成的數據結構。惟一的要點是
    • 

  • 當 state 變化時需要返回全新的對象，而不是修改傳入的參數。
*
    • 

  • 下面例子使用 switch 語句和字符串來做判斷，但你可以寫幫助類(helper)
    • 

  • 根據不同的約定（如方法映射）來判斷，只要適用你的項目即可。 </span> 
    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</pre> 

</pre> 
你應該把要做的修改變成一個普通對象，這個對象被叫做 action，而不是直接修改 state。然后編寫專門的函數來決定每個 action 如何改變應用的 state，這個函數被叫做 reducer。 


如果你以前使用 Flux，那么你只需要注意一個重要的區別。Redux 沒有 Dispatcher 且不支持多個 store。相反，只有一個單一的 store 和一個根級的 reduce 函數（reducer）。隨著應用不斷變大，你應該把根級的 reducer 拆成多個小的 reducers，分別獨立地操作 state 樹的不同部分，而不是添加新的 stores。這就像一個 React 應用只有一個根級的組件，這個根組件又由很多小組件構成。 


用這個架構開發計數器有點殺雞用牛刀，但它的美在于做復雜應用和龐大系統時優秀的擴展能力。由于它可以用 action 追溯應用的每一次修改，因此才有強大的開發工具。如錄制用戶會話并回放所有 action 來重現它。 


文檔
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！