一.遇到问题
1.让我们举个例子
比方说我们有多个同时存在的页面，且每个页面上都展示了用户的昵称。
现在我们要跳转修改昵称页面，发起修改昵称的请求。
昵称修改成功后，我们大多会发送一个通知，然后多个页面监听这个通知。
在接收到通知后，各个页面按照自己的逻辑，开始更新数据源，渲染UI。
2.如果在RN中
我们每个页面接收到通知后，都会去更新自己的state，从而渲染UI。
当越来越多的这种情况出现时，你的state管理会变得越来越混乱。
3.state 在什么时候，由于什么原因，如何变化已然不受控制
二.Redux可以做什么
1.state
redux维护了一个全局的state，其他state都以一个对象树的形式储存在在其中。
globalState: {
userInfoState: {
userName: '李超'
},
courseState: {}
...
}
2.让我们举个例子
比方说我们有多个同时存在的页面，且每个页面上都展示了用户的昵称。
每个页面的昵称数据都是从redux维护的state中取出的。
现在我们要跳转修改昵称页面，发起修改昵称的请求。
昵称修改成功后，修改redux中的数据。那么所有页面的昵称就全都更新了。
三.Redux长什么样子
三部分
1. store
1.1 是什么
- 掌控着state存储及state更新方法。
- Redux 应用有且只有一个单一的 store。
2.2 作用
- 它可以拿到那个全局的 state。
- 它可以修改这个全局的 state。
2. action
2.1 是什么
- action就是一个简单的对象。
{
type: kChangeUserName,
userName: '李超'
}
- action对象必须有一个type字段，标识着这个action的类型。
2.2 作用
- redux维护的state中的内容，只能通过action来改变。它是 store中 数据的唯一来源。
3. reducer
3.1 是什么
- 是一个处理action的函数，官方推荐为纯函数。
3.2 作用
- 根据action，返回新的state。
四.store，action，reducer的运转
1.第一步，action创建函数
export function changeUserName() {
return {
type: kChangeUserName,
userName: '李超'
}
}
2.第二步，reducer处理函数
// 接收现有的state，和传过来的action
export default function handleUserInfo(state = {}, action) {
switch (action.type) {
case kChangeUserName:
return {
...state,
userName: action.userName
};
...
default:
return state;
}
}
3.第三步，根据reducer创建sotre
createStore(reducer);
4.第四步，发起昵称修改
store.dispatch(changeUserName());
五.如何使用Redux
1.编写业务所需的action和reducer，创建store。
2.在使用redux的页面中，绑定对应的数据
const mapStateToProps = globalState => ({
userName: globalState.userInfoState.userName
});
const mapDispatchToProps = dispatch => ({
dispatch
});
export default connect(mapStateToProps, mapDispatchToProps)(Page);
3.使用
this.props.userName;
this.props.dispatch(changeUserName());
六.总结
1.什么时候，由于什么原因，如何变化
| 什么时候 | 什么原因 | 如何变化 |
|---|---|---|
| dispatch | action | reducer |
2.严格的单向数据流
应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。
七.Redux图解
