【React Native】Redux入门教程

一.遇到问题

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图解

八.参考文档

1.Redux中文文档