【译】你也许并不需要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 (

            


                {this.state.value}

                +

                -

            

        )

    }

}

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 (

            


                {this.state.value}

                +

                -

            

        )

    }

}

Redux库本身只是一组将“减速器”“装载”到单个全局存储对象的助手。您可以根据需要随意使用或减少Redux。但是，如果您权衡取舍，请确保您得到了回报