【译】你也许并不须要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。可是，若是您权衡取舍，请确保您获得了回报