【譯】也許你不必使用 Redux

原文鏈接：You Might Not Need Redux

人們常常在正真需要 Redux 之前，就選擇使用它。「如果不使用 Redux，我們的應用無法擴展怎麼辦？」應用接入 Redux 之後，開發者就開始頭疼了。「為什麼為了開發一個簡單的功能需要創建 3 個文件？」為什麼！

人們痛苦地抱怨 Redux, React, FP, 不可變數據和一些別的東西，但我理解他們。那些不需要一系列代碼來更新應用狀態的方法自然比使用 Redux 更為簡單。這說的沒錯，設計上也是如此。

Redux 提供了一種權衡。它要求你：

• 用簡單的對象和數組來描述應用狀態
• 用簡單對象來描述應用中的變更
• 用純函數來描述處理變更的邏輯

無論是不是 React 應用，這些限制都不是創建一個應用所必須的。事實上，這些都是非常強的約束，在把它們加入應用之前，你應當慎重考慮。

你有沒有一些好的理由來使用 Redux？

當然是有的。這些限制吸引我是因為它同時也能夠使應用擁有以下的特性：

• 持久化應用狀態到 LocalStorage，之後應用可以根據該狀態啟動。（視頻預警）
• 伺服器初始化應用狀態，客戶端直接根據該狀態啟動。
• 序列化用戶操作，並將它們連同應用狀態的快照一同添加到錯誤報告中，使得產品開發人員能夠通過重放用戶操作來重現錯誤。
• 無需要對代碼做巨大的修改，就能通過網路傳遞簡單的 Action 對象來實現協作環境。
• 無需要對代碼做巨大的修改，就能實現撤銷或重做。
• 在開發環境中，可以在應用狀態歷史中旅行，並且當代碼修改時，會根據操作歷史重新計算當前狀態。
• 開發工具提供了全面的檢查和控制能力，使產品開發人員能為他們的應用構建自定義工具。
• 當 UI 變更時，可以重用大部分業務邏輯。（視頻預警）

如果，你正在開發一個可擴展的終端、JavaScript 調試器，或是某些類型的應用，那麼，Redux 也許值得一試。至少，它是值得考慮的。（順便說一句，Elm 和 Om 並不是新技術。）

然而，如果你只是學習 React，那麼，Redux 並不是你的首選。

與之相反，你該看看理解 React。當你有真正的需要或想玩一些新東西的時候，才去嘗試 Redux。然而，就像你使用其他強限制的工具一樣，謹慎地選擇是否使用它。

如果，你覺得用 Redux 的方式編碼有壓力，那可能意味著你或你的夥伴對此太較真了。Redux 只是你工具箱中的一件工具，一種嘗試。

最後，記住你可以將 Redux 的理念運用到你的應用中，但不使用 Redux。試想一下，一個擁有本地狀態的 React 組件：

import React, { Component } from react;nnclass Counter extends Component {n state = { value: 0 };nn increment = () => {n this.setState(prevState => ({n value: prevState.value + 1n }));n };nn decrement = () => {n this.setState(prevState => ({n value: prevState.value - 1n }));n };nn render() {n return (n <div>n {this.state.value}n <button onClick={this.increment}>+</button>n <button onClick={this.decrement}>-</button>n </div>n )n }n}n

這是非常合理的。認真地說，它值得重複使用。

使用內部 State 無可厚非。

Redux 提供的權衡是通過增加中間環節來將「發生了什麼」和「該如何變化」之間進行解耦。

這樣做是不是總是正確的哪？不，這是一種權衡。

比如，我們可以從組件中將 reducer 抽出：

import React, { Component } from react;nnconst counter = (state = { value: 0 }, action) => {n switch (action.type) {n case INCREMENT:n return { value: state.value + 1 };n case DECREMENT:n return { value: state.value - 1 };n default:n return state;n }n}nnclass Counter extends Component {n state = counter(undefined, {});nn dispatch(action) {n this.setState(prevState => counter(prevState, action));n }nn increment = () => {n this.dispatch({ type: INCREMENT });n };nn decrement = () => {n this.dispatch({ type: DECREMENT });n };nn render() {n return (n <div>n {this.state.value}n <button onClick={this.increment}>+</button>n <button onClick={this.decrement}>-</button>n </div>n )n }n}n

發現沒有，我們不必運行 npm install 就能使用 Redux。酷！

狀態組件能不能也這樣做？可能不行。也就是說，除非你有打算從額外的中間環節中受益。在當前這個時代，想法才是關鍵。

Redux 庫它本身只是一系列的助手將 reducers 「掛載」到全局唯一的 store 對象上。你可以根據你的喜好來選擇是儘可能少，或儘可能多得使用 Redux。

但是，如果你付出了一些，確保你同時也能獲得一些回報。

譯者註：如果你對本文感興趣，你或許也會對這篇文章感興趣。