我以我公司的项目为例子，讲一下我对redux的理解，如下图所示：大家可以先看下第五块－工作流程，然后在从前面往后看，理解会更深刻，
希望对大家有帮助！
image.png
一、前言
随着WEB应用变得越来越复杂，再加上node前后端分离越来越流行，那么对数据流动的控制就显得越发重要。redux是在flux的基础上产生的，
基本思想是保证数据的单向流动，同时便于控制、使用、测试。
redux不依赖于任意框架(库)，只要subscribe相应框架(库)的内部方法，就可以使用该应用框架保证数据流动的一致性。
二、 Redux的设计思想
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
三、 Redux的三原则
1. Single source of truth单一数据源，数据流向也是单一方向。整个应用的state，存储在唯一一个javascript对象中，同时也只有一个store用于存储这个对象.
2. State is read-only状态是只读的。唯一能改变state的方法，就是触发action操作。action是用来描述正在发生的事件的一个对象。
3. Changes are made with pure functions在改变state tree时，用到action，同时也需要编写对应的reducers才能完成state改变操作。
三、 Redux的基本概念
1. Redux使用了类似于Flux的单向数据流，但是它只有一个单一的store对象，这个store对象通过克隆原始的store来改变，它调用reducer将action和之前的state作为参数，reducer并不产生副作用。
2.action是一个简单的对象，其中包含了需要执行的操作的类型以及一些负载。改变由reducers 来执行，reducers 是没有副作用的纯函数，将先前的state和一个action作为参数。它们会返回由应用action产生的
新的state。
3.Redux提供了一个方法，可以将reducers合并成一个，当store被创造出来的时候，它可以做一个简单的调用。
4.RN中state状态的改变只存在当前组件的生命周期中，Redux是为了将组件的生命周期扩大到APP被杀死，而不是单纯在组件生命周期中
3.1 store
1. Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
2. Store 就是把 Reducer 和 action 联系到一起的桥梁。Store 接收 Action 的数据并将其连同当前的 state树 (包含所有 state 的一种特殊的数据结构，是一个单一的对象）发给 Reducer。
3. 当前时刻的 State，可以通过store.getState()拿到。
4. Redux 提供createStore这个函数，用来生成 Store。
例子：
import {AppContainer} from 'react-hot-loader';
import createStore from 'redux/lib/createStore';
import combineReducers from 'redux/lib/combineReducers';
import {Provider} from 'react-redux';
import * as reducers from './reducers';
// combineReducer的简单实现: 把所有子 Reducer 放在一个文件里面，然后统一引入
const reducer = combineReducers({
...reducers
});
export const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // eslint-disable-line
);
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<App />
</Provider>
</AppContainer>,
document.getElementById('approot')
);
注意：
1. 参数1-reducer：store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法
2. 参数2：表示 State 的最初状态。这通常是服务器给出的。window.__REDUX_DEVTOOLS_EXTENSION__就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认
初始值。
3. combineReducers：用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
4. React-Redux 提供Provider组件，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到store了
3.2 action
1. State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
2. Action 是一个对象。它包含一个类型以及相关数据，其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置
3. store.dispatch()是 View 发出 Action 的唯一方法，此方法会自动调用 Reducer，得到新的 State。
例子：
/**
* Created by work on 17/6/15.
*/
export const REFRESH_PATCH_ITEMDATA = 'REFRESH_PATCH_ITEMDATA';
export const refreshPatchItemData = (patchItemData) => ({
type: REFRESH_PATCH_ITEMDATA,
patchItemData
});
3.3 reducer － 更新state
1. reducer是一个纯函数,Action只是用来描述事情发生，具体的业务逻辑操作和state的更新是交给Reducer来处理，它接收一个之前的 state和一个 Action；Reducer 函数里面不能改变 State，必须返回一个全新的对象。
2. Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
例子：
/**
* Created by work on 17/6/15.
*/
import {REFRESH_PATCH_ITEMDATA} from '../actions/patchReport';
const initState = {
patchItemData: null
};
export default (state = initState, action) => {
switch (action.type) {
case REFRESH_PATCH_ITEMDATA: {
const {patchItemData} = action;
return Object.assign({}, state, {patchItemData});
}
default:
return state;
}
};
四、应用
方法－：通过connect获取存入到redux中的值
image.png
方法二：
更加简洁的方法：
import {refreshPatchItemData} from '../../../../actions/patchReport';
存值：refreshPatchItemData是你在action中写的方法
store.dispatch(refreshPatchItemData(json.data)); // action
取值：patchReport是在reducers中index.js中对应的redurce文件的名字，patchItemData是文件中设置的初始值
store.getState().patchReport.patchItemData // redurce
五、工作流程
image.png
1. 用户发出action（可以参考Redux的基本概念中3.2action的第一条）
store.dispatch(action);
2. 然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
3. State 一旦有变化，Store 就会触发重新渲染 View。
Action --> Store --> Reducers --> Store --> View --> Action
参考：阮一峰老师的入门教程
网友评论