据我所知，redux的灵感来自于通量。flux是一个类似MVC(模型视图控制器)的架构。facebook在使用MVC时由于可扩展性问题引入了流量。所以通量不是一个实现，它只是一个概念。实际上redux是通量的实现。

Redux要求关于不变性的纪律。我可以推荐ng-freeze，让您了解任何意外的状态突变。

据我所知，redux的灵感来自于通量。flux是一个类似MVC(模型视图控制器)的架构。facebook在使用MVC时由于可扩展性问题引入了流量。所以通量不是一个实现，它只是一个概念。实际上redux是通量的实现。

Flux和Redux…

Redux is not a pure Flux implementation but definitely inspired by Flux. Biggest difference is that it uses a single store that wraps a state object containing all the state for your application. Instead of creating stores like you'll do in Flux, you'll write reducer functions that will change a single object state. This object represent all the state in your app. In Redux you will get the current action and state, and return a new state. That mean that actions are sequential and state is immutable. That bring me to the most obvious con in Redux (in my opinion).

Redux支持一个不可变的概念。

为什么不变性?

原因如下: 1. 相干存储的状态总是由减速器改变，因此很容易跟踪谁改变了什么。 2. 性能——因为它是不可变的，Redux只需要检查之前的状态!==当前状态，如果是，则呈现。不需要每次循环状态以确定呈现。 3.调试-新的很棒的概念，如时间旅行调试和热重新加载。

更新:如果这还不够说服你，看看Lee Byron关于不可变用户界面的精彩演讲。

Redux需要开发人员通过代码库/库来维护这一思想。您需要确保以不可变的方式选择库和编写代码。

如果您想了解更多关于Flux概念的不同实现(以及最适合您的需求的实现)，请查看这个有用的比较。

说了这么多，我必须承认Redux是JS未来发展的方向(至于写这些行)。

相对于其他Flux替代品，使用Redux的最大好处之一是它能够将您的思想重新定位为更实用的方法。一旦你理解了这些线是如何连接起来的，你就会意识到它在设计上令人惊叹的优雅和简单，而且永远不会回头。

我更喜欢使用Redux，因为它使用一个存储，这使得状态管理比Flux更容易，还有Redux DevTools，它是非常有用的工具，让你看到你对你的状态做了什么，有一些有用的数据，它真的内联React开发工具。

此外，Redux在使用其他流行框架(如Angular)时也有了更多的灵活性。 不管怎样，让我们看看Redux是如何介绍自己作为一个框架的。

Redux有三个原理可以很好地介绍Redux，这三个原理也是Redux与Flux的主要区别。

真相来源单一

The state of your whole application is stored in an object tree within a single store. This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application; it also enables you to persist your app's state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

状态为只读

The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

使用纯函数进行更改

To specify how the state tree is transformed by actions, you write pure reducers. Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

欲了解更多信息，请访问这里