react-native 中使用redux

技术

对于刚学习rn的人来说，看到redux肯定会一脸懵。redux是干啥的呢，网上也有很多介绍，我就不做过多介绍了，个人把他理解成一个 小型数据库,用来处理数据的。更多详细内容看官方的吧，我只做一个个人对其理解的简单介绍。

首先我们知道rn中通过state、props这两种方式控制组件，redux就是通过改变state来控制组件的变化。怎么改变的呢，大体讲一下流程吧：
1、首先我们点击按钮或者网络数据请求回来的时候需要发消息到action内
2、action将消息预处理，即区分type，然后返回给store。
3、store将分类好的消息分配到reducer中处理state。
4、reducer接收到消息、根据type做对应的处理，生成新的state返回给store
5、store控制页面渲染

不多说了，还是边上代码边做讲解比较好，先用着，然后慢慢再理解。当我们使用redux的时候就需要在项目里添加redux依赖。

npm install --save redux
npm install --save react-redux
npm install --save redux-thunk

redux核心就三部分：Action、Reducer、Store。
* Action
想要更新state中的数据，就要发起一个动作，这就用到action了。Action内部必须使用一个字符串类型的type来表示要执行的动作。一般type都定义成字符串常量。Action只能描述有事情发生了，不能搞其他的。

import * as types from '../constants/LoginTypes'
let user = {
    name: '小明',
    age: 25
}
// 这里发起Action
export function login() {
    return dispatch => {
        dispatch(isLogining());
        let result = fetch('https://www.baidu.com')
            .then((res) => {
                dispatch(loginSuccess(true, user))
            }).catch((err) => {
                dispatch(loginError(false))
            })
    }
}
// 这个Action标识正在登录
function isLogining () {
    return {
        type: types.LOGIN_IN_DOING
    }
}
// 这个Action标识登录成功
function loginSuccess(isSuccess, user)  {
    console.log('loginSuccess')
    return {
        type: types.LOGIN_IN_DONE,
        user: user.name
    }
}
// 这个Action标识登录失败
function loginError(isSuccess){
    console.log('error')
    return {
        type: types.LOGIN_IN_ERROR
    }
}

• Reducer
  reducer是干啥用的呢，个人理解其实就是MVC中的Model模型。举个例子吧，我们页面要展示用户名、性别、年龄、住址等信息，这时我们服务端接口里给返回的格式如下，这时我们需要对这些字段做处理、存数据、发送给store做页面展示用。reducer就干这个用的。

{
    status:0,
    userName:"小李",
    age:25,
    sex:"man"
    address:"北京"
}

还是直接上代码吧

import * as types from '../constants/LoginTypes'
const initialState = {
    status: '点击登录',
    isSuccess: false,
    user: null
}
export default function longinIn(state = initialState, action) {
    switch (action.type) {
        case types.LOGIN_IN_DOING:
            return {
                ...state,
                status: '正在登录',
                isSuccess: false,
                user: null
            }
            break;
        case types.LOGIN_IN_DONE:
            return {
                ...state,
                status: '登录成功',
                isSuccess: true,
                user: action.user
            }
            break;
        case types.LOGIN_IN_ERROR:
            return {
                ...state,
                status: '登录失败',
                isSuccess: false,
                user: null
            }
        default:
            return state;
    }
}
// 当然我们会有多个reducer，那么我们需要把不同的reducer关联到一起提供给store
import { combineReducers } from 'redux'
import loginIn from './loginReducer'
import counterIn from './CounterReducer'
module.exports =  combineReducers({
    loginIn:loginIn,
    counterIn:counterIn
})

有码就好理解我说的model了吧，initialState是初始化。下边是根据action的type类型做相应的处理。
* Store
store是把action、reducer联系到一起的对象。它负责一下职责

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

'use strict';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
    const store = createStoreWithMiddleware(rootReducer, initialState)
    return store;
}

Redux 应用只有一个单一的store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

• 上边三步还不行，还需要下边最重要的一步，state关联

const mapStateToProps = (state) => {
  return {
    user: state.loginIn.user,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators({
      ...loginAction
    }, dispatch)
  }
}
module.exports = connect(mapStateToProps, mapDispatchToProps, undefined, { withRef: true })(App)