我更喜欢使用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)

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

Redux作者在这里!

我想说的是，你将在使用它时做出以下妥协:

You'll need to learn to avoid mutations. Flux is unopinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, use Immutable.js, or trust yourself and your team to write non-mutative code, but it's something you need to be aware of, and this needs to be a conscious decision accepted by your team. You're going to have to carefully pick your packages. While Flux explicitly doesn't try to solve “nearby” problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a young but rich ecosystem. This means most packages are new ideas and haven't received the critical mass of usage yet. You might depend on something that will be clearly a bad idea a few months later on, but it's hard to tell just yet. You won't have a nice Flow integration yet. Flux currently lets you do very impressive static type checks which Redux doesn't support yet. We'll get there, but it will take some time.

我认为第一个是初学者的最大障碍，第二个是过度热情的早期采用者的问题，第三个是我个人的烦恼。除此之外，我不认为使用Redux会带来Flux所避免的任何特定缺点，有些人甚至说它与Flux相比有一些优点。

请参阅我关于使用Redux的优点的回答。

Both Redux and Flux require a considerable amount of boilerplate code to cover many common patterns, especially those that involve asynchronous data fetching. The Redux documentation already has a handful of examples for boilerplate reduction: http://redux.js.org/docs/recipes/ReducingBoilerplate.html. You could get everything you might need from a Flux library like Alt or Fluxxor, but Redux prefers freedom over features. This could be a downside for some developers because Redux makes certain assumptions about your state that could be inadvertently disregarded.

你真正回答你的问题的唯一方法是尝试Redux，如果你可以的话，也许在一个个人项目中。Redux的出现是因为开发人员需要更好的体验，它倾向于函数式编程。如果你不熟悉函数概念，比如约简器和函数组合，那么你可能会慢下来，但只是稍微慢一点。在数据流中采用这些想法的好处是更容易测试和可预测性。

免责声明:我从Flummox(一种流行的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)

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

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

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