Redux解决了哪些问题？什么时候使用它？
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及：1.代码结构；2.组件之间的通信。
对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了Flux架构的概念，引发了很多的实现。2015年，Redux出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。情况如下：
1.用户的使用方式非常简单
2.用户之间没有协作
3.不需要与服务器大量交互，也没有使用 WebSocket
4.视图层（View）只从单一来源获取数据
一般运用数据、界面交互都很复杂的，所以，个人觉得能用就还是用吧，除非你只是写个demo。
设计思想
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
基础篇代码
一、store的概念
createStore是store生成器，store相当于整运用的数据容器，
你可以把它看成一个json数据表，其反应了整个运用的可变状态信息，
当每有一个节点发生变化都会使界面发生变化；
const store = createStore(func) fun为reducer函数即纯函数->同样的输入对应同样的输出。
二、state的概念
store是存储state的容器，state的获取方式如下
const state = store.getState()
Redux规定，一个state对应一个View。只要state相同，View就相同。你知道 State，就知道 View 是什么样，反之亦然。
三、action的概览
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。
例如：
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
reducer 案例：
State -> 是一个对象
function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
// 或者
return { ...state, ...newState };
}
State -> 是一个数组
function reducer(state, action) {
return [...state, newItem];
}
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);
unsubscribe();
四、可以发现 Store 提供了三个方法:
1.store.getState()
2.store.dispatch()
3.store.subscribe()
createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的
let store = createStore(todoApp, window.STATE_FROM_SERVER)
五、Reducer 的拆分
将reducer函数粒度化，通过combineReducers函数合并构建成强大功能的reducer
网友评论