了解Redux范例

Lately I’ve been hearing a lot about Redux, it’s very trendy between my partners here at Tryolabs. It is so trendy that even one hard core backend developer who hated UI development started to love it just because of Redux. With this as a tipping point I decided that it was time to get my hands on it.

最近，我听到了很多有关Redux的信息 ，在Tryolabs的合作伙伴之间，这是非常流行的。 它是如此流行，以至于甚至有一个讨厌UI开发的硬核后端开发人员也因为Redux而开始喜欢它。 以此作为转折点，我认为是时候开始实践了。

If you’re used to MVC based architectures and want to know more about Redux, this post might be of help. Otherwise, you’re completely welcome to read some thoughts on Redux

如果您习惯于基于MVC的架构，并且想了解有关Redux的更多信息，那么这篇文章可能会对您有所帮助。 否则，完全欢迎您阅读有关Redux的一些想法

MVC到助焊剂 (MVC to Flux)

To give you some background, I’ve been developing apps for the last 5 years with MVC based architectures no matter which framework I used (AngularJS, Django, etc). Considering this, the first thing that caught my attention when digging into Redux was the paradigm shift, it is completely different. As a predictable state container for JavaScript apps inspired on Flux, it uses the following structure:

为了给您提供一些背景知识，无论我使用哪种框架（AngularJS，Django等），过去五年来我一直在使用基于MVC的体系结构开发应用程序。 考虑到这一点，在深入研究Redux时引起我注意的第一件事是范式转换，这是完全不同的。 作为受Flux启发JavaScript应用程序的可预测状态容器，它使用以下结构：

When high-level comparing to MVC architectures, Redux offers the Stores that will save all our data, similar to what Models were. Then the Actions and the Dispatcher are the user events, the data modifications and their handlers. Finally React Views which replace the Views.

与MVC架构进行高层比较时，Redux提供的Stores将保存我们所有的数据，类似于Models。 然后，Actions和Dispatcher是用户事件，数据修改及其处理程序。 最后，React Views取代了Views。

The main characteristic of Redux over Flux are the Reducers. A Reducer is a generic function that takes an Action and its current State and invokes the function that matches the action. There is only one Store, that we’ll call it Redux Store, which it’s initialized by the combination of all the Reducers created. 

Redux over Flux的主要特征是Reducer。 Reducer是一个通用函数，它接受一个Action及其当前状态，并调用与该Action相匹配的函数。 只有一个商店，我们将其称为Redux商店，它通过创建的所有Reducers的组合进行初始化。

The flow goes like this: Data comes into the application and we create an Action. Once created we send it through the Redux Store Dispatcher to each Reducer. Each Reducer decides if uses the payload from the Action to update its internal state or not. After all the Reducers complete their update, the React Views will re-render with the new states. One of the biggest changes is the unidirectional data flow and that there is only one way to do things. First you’ll have an Action that affects Reducers that reflects their changes on Views, and then you’ll start all over again.

流程如下所示：数据进入应用程序，然后我们创建一个Action。 创建完成后，我们通过Redux Store Dispatcher将其发送到每个Reducer。 每个Reducer决定是否使用Action中的有效负载来更新其内部状态。 在所有的Reducer完成更新之后，React Views将使用新状态重新渲染。 最大的变化之一是单向数据流，并且只有一种处理方法。 首先，您将具有一个影响Reducer的动作，该动作将其更改反映在视图上，然后您将重新开始。

If you want to learn more about Actions, Reducers and Stores, Redux has a very complete documentation that you should look at.

如果您想了解有关动作，Reducer和商店的更多信息，Redux有一个非常完整的文档 ，您应该查看。

功能编程 (Functional Programming)

While I was researching I found out about another cool library, I’m talking about Immutable JS. Since Redux is inspired by functional programming and immutable data, this library is very helpful because you can make changes on your states without worrying about unwanted mutation later. In other words when you create for example an Immutable List, the initial state will remain the same forever, if you add or remove an element it will create a new Immutable List with the update. This is really cool and you can check out the docs because it has a lot of functions that can make your job easier.

在研究的过程中，我发现了另一个很棒的库，这是在谈论 Immutable JS 。 由于Redux受功能编程和不可变数据的启发，因此该库非常有用，因为您可以更改状态，而不必担心以后发生不必要的突变。 换句话说，当您创建例如不可变列表时，初始状态将永远保持不变，如果添加或删除元素，它将使用更新创建新的不可变列表。 这真的很酷，您可以查看文档，因为它具有许多可以使您的工作更轻松的功能。

围捕 (Rounding up)

Coming back to Redux, I have only tried it for a week and I feel that I’m already falling in love with it since it seems to offer the one recipe to solve every problem. Whenever you want to add a new user interaction you just create the action, dispatch it and solve it in the reducers whether is useful or not the update and later re-render the views, that simple.

回到Redux，我只试用了一个星期，我觉得我已经爱上它了，因为它似乎提供了一种解决所有问题的方法。 每当您想添加新的用户交互时，只需创建动作，分派动作并在化简器中解决它是否有用，然后再重新渲染视图就可以了。

翻译自: https://www.pybloggers.com/2016/04/understanding-the-redux-paradigm/