Redux1 - 简介(Readme)
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
- 代码结构
- 组件之间的通信
对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，Redux是Flux思想的发展，同时避免了其复杂性，并吸取了Elm的解决思路，很短时间内就成为了最热门的前端架构。
Redux是一个可预测的JavaScript应用程序的状态容器。
基于Redux可以编写在不同运行环境中（客户端，服务端，和原生程序）行为一致的应用程序，并便于测试的进行。此外，其提供了优秀的开发体验，比如实时刷新和时间旅行调试。
首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。
曾经有人说过这样一句话。 “如果你不知道是否需要 Redux，那就是不需要它。”
Redux 的创造者 Dan Abramov 又补充了一句。 “只有遇到 React 实在解决不了的问题，你才需要 Redux 。”
不需要使用Redux的场景：
- 简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
- 用户的使用方式非常简单，用户之间没有协作
- 不需要与服务器大量交互，也没有使用 WebSocket
- 视图层（View）只从单一来源获取数据
Redux 的适用场景：多交互、多数据源。
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。
总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。
Redux 核心原则
- 应用的整个状态树必须被存储在一个单例对象store中。
- 更新状态树的唯一方法是派发一个action对象来描述发生的情况。
- 特别需要指出的是，用来处理状态树更新的reducers函数必须是纯函数。
import { createStore } from 'redux'
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
**/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)
// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.
store.subscribe(() =>
console.log(store.getState())
)
// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1在Redux中禁止直接修改状态，需要用一个简单的actions对象来描述修改。最后在reducer方法中如何处理整个程序的状态。
如果了解Flux，需要理解Redex和Flux的一个重要区别。Redux没有Dispatcher，也不支持多个store。在Redux中，只包含根reduce方法中处理的一个store对象单例。当你的应用复杂化的同时，不需要增加新的store对象，只需要将根reducer拆分为更小的reducer来独立处理状态树的不同部分。类似于React应用中只有一个根组件，但是其由更多的小组件组成。
在计数器应用中使用这种结构模式显得过于复杂，但当应用扩展到更大、更复杂的应用时将发现其优势。可以配合强大的开发者工具，以用来追踪action触发的每一次修改。可以记录用户会话，并通过重播每一个action重现操作场景。