【譯】你也許並不須要redux

原文引自：https://medium.com/@dan_abram...

做者：Dan Abramov

咱們在開發應用中選擇redux的緣由一般是相似這樣的——「若是沒有它，咱們的應用程序沒法擴展怎麼辦？」。然而當真正使用redux以後，開發人員又對引入代碼的中間件Redux感到不滿意——「爲何我必須觸發三個文件才能使一個簡單的功能正常工做呢？」

我理解你們討厭redux、react、函數式編程、不變性以及其餘很痛苦的問題。假如咱們將Redux與不須要「樣板」代碼來更新狀態的方法進行比較，是很很容易得出redux複雜的結論的。

Redux提供了一個折衷方案，它要求您：

• 將應用程序狀態描述爲純對象和數組。
• 將系統中的更改描述爲普通對象。
• 將處理更改描述爲純函數的邏輯。

然而，不管有沒有React，構建應用程序都不須要這些限制。 實際上，這些都是很嚴格的約束，即便在應用程序的某些部分中，採用它們以前也應仔細考慮。咱們真的有充分的理由使用它嗎？

redux的這些限制對開發者頗有吸引力，由於它們能夠幫助構建如下應用程序：

• 將狀態持久保存到本地存儲，而後從中啓動，便可使用。
• 在服務器上預填充狀態，以HTML格式將其發送到客戶端，而後從中啓動。
• 序列化用戶操做，並將其與狀態快照一塊兒附加到自動錯誤報告，以便產品開發人員能夠重播它們以重現錯誤。
• 經過網絡傳遞操做對象以實現協做環境，而無需對代碼的編寫方式進行重大更改。
• 保留撤消歷史記錄或實施樂觀的更改，而無需對代碼的編寫方式進行重大更改。
• 在開發中的狀態歷史記錄之間移動，並在代碼更改時從動做歷史記錄從新評估當前狀態（如TDD）。
• 爲開發工具提供全面的檢查和控制功能，以便產品開發人員能夠爲其應用程序構建自定義工具。
• 在重用大多數業務邏輯的同時，提供備用UI。

若是您正在使用可擴展的終端，JavaScript調試器或某些類型的Web應用程序，則可能值得嘗試一下，或者至少考慮其一些想法；

可是，若是您只是在學習React，請不要將Redux看成首選。而是在React中學習思考；

若是您確實須要Redux，或者想要嘗試新的東西，請返回Redux。可是，請謹慎使用它，就像使用任何備受好評的工具同樣；

若是您感到被迫以「 Redux方式」作事，則可能代表您或您的隊友對此過於重視。 它只是您工具箱中的一種工具，實驗變得瘋狂。

最後，不要忘記，您能夠在不使用Redux的狀況下應用Redux的想法。 例如，考慮具備本地狀態的React組件：

import React, { Component } from 'react';

class Counter extends Component {

    state = { value: 0 };

    increment = () => {

        this.setState(prevState => ({

            value: prevState.value + 1

        }));

    };

    decrement = () => {

        this.setState(prevState => ({

            value: prevState.value - 1

        }));

    };

    render() {

        return (

            <div>

                {this.state.value}

                <button onClick={this.increment}>+</button>

                <button onClick={this.decrement}>-</button>

            </div>

        )

    }

}

Redux提供的權衡是添加間接以將「發生的事情」與「事情如何改變」脫鉤

例如，咱們能夠從組件中提取一個reducer：

import React, { Component } from 'react';

const counter = (state = { value: 0 }, action) => {

    switch (action.type) {

        case 'INCREMENT':

        return { value: state.value + 1 };

        case 'DECREMENT':

        return { value: state.value - 1 };

        default:

        return state;

    }

}

class Counter extends Component {

    state = counter(undefined, {});

    dispatch(action) {

        this.setState(prevState => counter(prevState, action));

    }

    increment = () => {

        this.dispatch({ type: 'INCREMENT' });

    };

    decrement = () => {

        this.dispatch({ type: 'DECREMENT' });

    };

    render() {

        return (

            <div>

                {this.state.value}

                <button onClick={this.increment}>+</button>

                <button onClick={this.decrement}>-</button>

            </div>

        )

    }

}

Redux庫自己只是一組將「減速器」「裝載」到單個全局存儲對象的助手。您能夠根據須要隨意使用或減小Redux。可是，若是您權衡取捨，請確保您獲得了回報