Action · redux中文文檔

# Redux 常見問題：Action ## 目錄 - [為何 type 必須是字符串，或者至少可以被序列化？為什么 action 類型應該作為常量？](#actions-string-constants) - [是否存在 reducer 和 action 之間的一對一映射？](#actions-reducer-mappings) - [怎樣表示類似 AJAX 請求的 “副作用”？為何需要 “action 創建函數”、“thunk” 以及 “middleware” 類似的東西去處理異步行為？](#actions-side-effects) - [應該使用什么樣的異步中間件? 怎樣在 thunks、sagas、observables 或其他類似的庫中做出選擇?](#actions-async-middlewares) - [是否應該在 action 創建函數中連續分發多個 action？](#actions-multiple-actions) ## Actions <a id="actions-string-constants"></a> ### 為何 `type` 必須是字符串，或者至少可以被序列化？為什么 action 類型應該作為常量？和 state 一樣，可序列化的 action 使得若干 Redux 的經典特性變得可能，比如時間旅行調試器、錄制和重放 action。若使用 `Symbol` 等去定義 `type` 值，或者用 `instanceof` 對 action 做自檢查都會破壞這些特性。字符串是可序列化的、自解釋型，所以是更好的選擇。注意，如果 action 目的是在 middleware 中處理，那么使用 Symbols、 Promises 或者其它非可序列化值也是 _可以_ 的。 action 只有當它們真正到達 store 且被傳遞給 reducer 時才需要被序列化。因為性能原因，我們無法強制序列化 action，所以 Redux 只會校驗 action 是否是普通對象，以及 `type` 是否定義。其它的都交由你決定，但是確保數據是可序列化將對調試以及問題的重現有很大幫助。封裝并集聚公共代碼是程序規劃時的核心概念。雖然可以在任何地方手動創建 action 對象、手動指定 `type` 值，定義常量的方式使得代碼的維護更為方便。如果將常量維護在單獨的文件中，[在 `import` 時校驗](https://www.npmjs.com/package/eslint-plugin-import)，能避免偶然的拼寫錯誤。 #### 補充資料 **文檔** - [Reducing Boilerplate](/docs/recipes/ReducingBoilerplate.md#actions) **Discussion** - [#384: Recommend that Action constants be named in the past tense](https://github.com/reactjs/redux/issues/384) - [#628: Solution for simple action creation with less boilerplate](https://github.com/reactjs/redux/issues/628) - [#1024: Proposal: Declarative reducers](https://github.com/reactjs/redux/issues/1024) - [#1167: Reducer without switch](https://github.com/reactjs/redux/issues/1167) - [Stack Overflow: Why do you need 'Actions' as data in Redux？](http://stackoverflow.com/q/34759047/62937) - [Stack Overflow: What is the point of the constants in Redux？](http://stackoverflow.com/q/34965856/62937) <a id="actions-reducer-mappings"></a> ### 是否存在 reducer 和 action 之間的一對一映射？不存在。建議的方式是編寫獨立且很小的 reducer 方法去更新指定的 state 部分，這種模式被稱為 “reducer 合成”。一個指定的 action 也許被它們中的全部、部分、甚至沒有一個處理到。這種方式把組件從實際的數據變更中解耦，一個 action 可能影響到 state 樹的不同部分，對組件而言再也不必知道這些了。有些用戶選擇將它們緊密綁定在一起，就像 “ducks” 文件結構，顯然是沒有默認的一對一映射。所以當你想在多個 reducer 中處理同一個 action 時，應當避免此類結構。 #### 補充資料 **文檔** - [Basics: Reducers](/docs/basics/Reducers.md) - [Recipes: Structuring Reducers](/docs/recipes/StructuringReducers.md) **討論** - [Twitter: most common Redux misconception](https://twitter.com/dan_abramov/status/682923564006248448) - [#1167: Reducer without switch](https://github.com/reactjs/redux/issues/1167) - [Reduxible #8: Reducers and action creators aren't a one-to-one mapping](https://github.com/reduxible/reduxible/issues/8) - [Stack Overflow: Can I dispatch multiple actions without Redux Thunk middleware？](http://stackoverflow.com/questions/35493352/can-i-dispatch-multiple-actions-without-redux-thunk-middleware/35642783) <a id="actions-side-effects"></a> ### 怎樣表示類似 AJAX 請求的 “副作用”？為何需要 “action 創建函數”、“thunks” 以及 “middleware” 類似的東西去處理異步行為？這是一個持久且復雜的話題，針對如何組織代碼以及采用何種方式有很多的觀點。任何有價值的 web 應用都必然要執行復雜的邏輯，通常包括 AJAX 請求等異步工作。這類代碼不再是針對輸入的純函數，與第三方的交互被認為是 [“副作用”](https://en.wikipedia.org/wiki/Side_effect_%28computer_science%29)。 Redux 深受函數式編程的影響，創造性的不支持副作用的執行。尤其是 reducer， _必須_ 是符合 `(state, action) => newState` 的純函數。然而，Redux 的 middleware 能攔截分發的 action 并添加額外的復雜行為，還可以添加副作用。 Redux 建議將帶副作用的代碼作為 action 創建過程的一部分。因為該邏輯 _能_ 在 UI 組件內執行，那么通常抽取此類邏輯作為可重用的方法都是有意義的，因此同樣的邏輯能被多個地方調用，也就是所謂的 action 創建函數。最簡單也是最常用的方法就是使用 [Redux Thunk](https://github.com/gaearon/redux-thunk) middleware，這樣就能用更為復雜或者異步的邏輯書寫 action 創建函數。另一個被廣泛使用的方法是 [Redux Saga](https://github.com/yelouafi/redux-saga)，你可以用 generator 書寫類同步代碼，就像在 Redux 應用中使用 “后臺線程” 或者 “守護進程”。還有一個方法是 [Redux Loop](https://github.com/raisemarketplace/redux-loop)，它允許 reducer 以聲明副作用的方式去響應 state 變化，并讓它們分別執行，從而反轉了進程。除此之外，還有 _許多_ 其它開源的庫和理念，都有各自針對副作用的管理方法。 #### 補充資料 **文檔** - [Advanced: Async Actions](advanced/AsyncActions.md) - [Advanced: Async Flow](advanced/AsyncFlow.md) - [Advanced: Middleware](advanced/Middleware.md) **文章** - [Redux Side-Effects and You](https://medium.com/@fward/redux-side-effects-and-you-66f2e0842fc3) - [Pure functionality and side effects in Redux](http://blog.hivejs.org/building-the-ui-2/) - [From Flux to Redux: Async Actions the easy way](http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/) - [React/Redux Links: "Redux Side Effects" category](https://github.com/markerikson/react-redux-links/blob/master/redux-side-effects.md) - [Gist: Redux-Thunk examples](https://gist.github.com/markerikson/ea4d0a6ce56ee479fe8b356e099f857e) **討論** - [#291: Trying to put API calls in the right place](https://github.com/reactjs/redux/issues/291) - [#455: Modeling side effects](https://github.com/reactjs/redux/issues/455) - [#533: Simpler introduction to async action creators](https://github.com/reactjs/redux/issues/533) - [#569: Proposal: API for explicit side effects](https://github.com/reactjs/redux/pull/569) - [#1139: An alternative side effect model based on generators and sagas](https://github.com/reactjs/redux/issues/1139) - [Stack Overflow: Why do we need middleware for async flow in Redux?](http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux) - [Stack Overflow: How to dispatch a Redux action with a timeout?](http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559) - [Stack Overflow: Where should I put synchronous side effects linked to actions in redux?](http://stackoverflow.com/questions/32982237/where-should-i-put-synchronous-side-effects-linked-to-actions-in-redux/33036344) - [Stack Overflow: How to handle complex side-effects in Redux?](http://stackoverflow.com/questions/32925837/how-to-handle-complex-side-effects-in-redux/33036594) - [Stack Overflow: How to unit test async Redux actions to mock ajax response](http://stackoverflow.com/questions/33011729/how-to-unit-test-async-redux-actions-to-mock-ajax-response/33053465) - [Stack Overflow: How to fire AJAX calls in response to the state changes with Redux?](http://stackoverflow.com/questions/35262692/how-to-fire-ajax-calls-in-response-to-the-state-changes-with-redux/35675447) - [Reddit: Help performing Async API calls with Redux-Promise Middleware.](https://www.reddit.com/r/reactjs/comments/469iyc/help_performing_async_api_calls_with_reduxpromise/) - [Twitter: possible comparison between sagas, loops, and other approaches](https://twitter.com/dan_abramov/status/689639582120415232) <a id="actions-async-middlewares"></a> ### 應該使用什么樣的異步中間件? 怎樣在 thunk、saga、observable 或其他類似的庫中做出選擇? 這里有 [許多可用的異步/副作用中間件](https://github.com/markerikson/redux-ecosystem-links/blob/master/side-effects.md), 但最常用的有 [`redux-thunk`](https://github.com/reduxjs/redux-thunk)、 [`redux-saga`](https://github.com/redux-saga/redux-saga)和 [`redux-observable`](https://github.com/redux-observable/redux-observable)。它們是優勢、弱點及用例各不相同的工具。一般的經驗是: - Thunk 最適合復雜的同步邏輯（特別是需要訪問整個 Redux 存儲狀態的代碼）和簡單的異步邏輯（如基本的 AJAX 調用）。通過使用`async / await`，也可將 thunk 用于更復雜的基于 promise 的邏輯。 - Saga 最適合復雜的異步邏輯和解耦的“后臺線程”類型的行為，特別是如果需要監聽發起的（dispatched）action（這是通過 thunk 無法完成的事情）。 saga 需要使用者熟練使用 ES6 generator 函數和`redux-saga`的“effects”運算符。 - Observable 與 saga 解決了同一類問題，但依賴于 RxJS 來實現異步行為。 Observable 需要使用者熟練使用 RxJS API。我們建議大多數 Redux 用戶應該從 thunk 開始，如果他們的應用確實需要處理更復雜的異步邏輯，再添加一個額外的副作用庫，如 saga 或 observable。因為 saga 和 observable 具有相同的用例，所以應用程序通常使用其中一個，但不能同時使用兩者。但是，請注意 **同時使用 thunk 和 saga 或者 observable 是完全沒問題的**，因為它們解決的是不同的問題。 **文章** - [Decembersoft: What is the right way to do asynchronous operations in Redux?](https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/) - [Decembersoft: Redux-Thunk vs Redux-Saga](https://decembersoft.com/posts/redux-thunk-vs-redux-saga/) - [Redux-Thunk vs Redux-Saga: an overview](https://medium.com/@shoshanarosenfield/redux-thunk-vs-redux-saga-93fe82878b2d) - [Redux-Saga V.S. Redux-Observable](https://hackmd.io/s/H1xLHUQ8e#side-by-side-comparison) **討論** - [Reddit: discussion of using thunks and sagas together, and pros and cons of sagas](https://www.reddit.com/r/reactjs/comments/8vglo0/react_developer_map_by_adamgolab/e1nr597/) - [Stack Overflow: Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await](https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es2017-asy) - [Stack Overflow: Why use Redux-Observable over Redux-Saga?](https://stackoverflow.com/questions/40021344/why-use-redux-observable-over-redux-saga/40027778#40027778) <a id="actions-multiple-actions"></a> ### 是否應該在 action 創建函數中連續分發多個 action？關于如何構建 action 并沒有統一的規范。使用類似 Redux Thunk 的異步 middleware 支持了更多的場景，比如分發連續多個獨立且相關聯的 action、分發 action 指示 AJAX 請求的階段、根據 state 有條件的分發 action、甚至分發 action 并隨后校驗更新的 state。通常，明確這些 action 是關聯還是獨立，是否應當作為一個 action。評判當前場景影響因素的同時，還需根據 action 日志權衡 reducer 的可讀性。例如，一個包含新 state 樹的 action 會使你的 reducer 只有一行，副作用是沒有任何歷史表明 _為什么_ 發生了變更，進而導致調試異常困難。另一方面，如果為了維持它們的粒狀結構（granular），在循環中分發 action，這表明也許需要引入新的 acton 類型并以不同的方式去處理它。避免在同一地方連續多次以同步的方式進行分發，其性能問題是值得擔憂的。有許多插件和方法可以批處理調度。 #### 補充資料 **文檔** - [FAQ: Performance - Reducing Update Events](/docs/faq/Performance.md#performance-update-events) **文章** - [Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability](http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/#multiple-dispatching) **討論** - [#597: Valid to dispatch multiple actions from an event handler?](https://github.com/reactjs/redux/issues/597) - [#959: Multiple actions one dispatch?](https://github.com/reactjs/redux/issues/959) - [Stack Overflow: Should I use one or several action types to represent this async action?](http://stackoverflow.com/questions/33637740/should-i-use-one-or-several-action-types-to-represent-this-async-action/33816695) - [Stack Overflow: Do events and actions have a 1:1 relationship in Redux?](http://stackoverflow.com/questions/35406707/do-events-and-actions-have-a-11-relationship-in-redux/35410524) - [Stack Overflow: Should actions be handled by reducers to related actions or generated by action creators themselves?](http://stackoverflow.com/questions/33220776/should-actions-like-showing-hiding-loading-screens-be-handled-by-reducers-to-rel/33226443#33226443) - [Twitter: "Good thread on the problems with Redux Thunk..."](https://twitter.com/dan_abramov/status/800310164792414208)