本文介绍了ReactNative中使用Redux架构总结，分享给大家。具体如下：
使用Redux也有一段时间了。总结一下。
为什么要使用Redux?
背景：
Redux开发
开发环境
三个原则
单一数据源
整个应用的 state 被储存在一个对象树中，对象树存在于唯一的 store 中。store中的 state 绑定到组件
State 是只读的
惟一改变 state 的方法就是触发 action。action 是一个含有 type 属性的普通JS对象，type 可以用常量表示事件。
使用纯函数来执行修改
编写 reducers 来描述对应action如何修改 state 。一般可以用 switch(action.type) 来处理，无副作用
使用
react-redux提供了connect和Provider。
1.Provider是顶层的分发点，属性就是Store，将State分发给所有被connect的组件
2.connect：接受两个参数：一个是mapStateToProps或者mapDispatchToProps，一个是要绑定的组件本身。
Store
Store 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责：
Store本质上是一个对象，它以树的形式保存了整个应用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。
Redux应用只有惟一一个Store。
Store通过createStore方法来创建，根据整个应用的根Reducer的初始State。
代码如下：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';//异步
import reducers from './reducers';
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;
Reducers
Action只是描述了有事情发生了这一事实，并没有指明应用如何更新state。这是reducer要做的事情。
Reducer的本质是一个函数，并且是一个纯函数。没有任何副作用。简单来讲Reducer只负责做一件事，就是根据接收到的action和state来修改Store中的state：
(state, action) => newState
一般实现的时候，通过switch(action.type) 来判断不同的Action，default为旧state。同时可以定义初始状态。
代码：
import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
switch (action.type) {
case ActionTypes.CSTATE:
return { ...state, ...action.state };
case '_DPDATACHANGE_':
return {...state, ...action.dpState};
default:
return state;
}
};
//Reducer 合并
export default combineReducers({
newState,
});
注意:返回的是新state，如果需要保留部分旧state值，使用…state（ES7的对象展开语法，对对象会浅拷贝对应属性，这里等价于Object.assign({}, state, newState)），而如果合并state的话只会合并一层，对复杂state需要手动合并。
Action
Action是一个普通JS对象，至少包括一个type属性代表事件，其他属性可以用来传递数据。实践上对一个流程定义一个函数，流程可以包括网络请求，最后返回Action，这个函数叫Action Creator。
代码：Store可以dispatch这个Action，action的type表示标识符，state是它携带的数据。
export const newState = state => {
Store.dispatch({
type: ActionTypes.CSTATE,
state,
});
};
持久化
当触发action时根据其reducer key恢复数据，然后只需要在应用启动时分发action，这也很容易抽象成可配置的拓展服务，实际上三方库redux-persist已经为我们做好了这一切。
在Action中可以代码如下：
export const getStorage = async (key) => {
const d = await AsyncStorage.getItem(key);
return JSON.parse(d);
};
export const setStorage = (key, value) => {
AsyncStorage.setItem(key, JSON.stringify(value));
};
connect
通过- 提供 getState() 方法。获取 所有的当前state
通过connect，绑定需要的state以及Action Creator到你的组件的props上，这样组件就可以通过props来调用Action Creator，或者根据不同props来render()不同的组件。
代码：
mapStateToProps({ newState }) {
const value = newState[name];//name: newState.name
return {
name,
};
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
