ReactNative笔记之集成Redux------4

使用redux的场景

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

下面直接以项目为例演示在ReactNative项目中使用Redux
1、添加需要的库
npm install –save redux
npm install –save react-redux
npm install –save react-navigation
npm install –save redux-thunk

2、项目结构图及redux相关文件简单介绍

3、项目中相关文件介绍
（1）type：redux根据type类型来处理不同的状态逻辑

export const LOGIN_IN_DOING = 'LOGIN_IN_DOING' //正在登录
export const LOGIN_IN_DONE = 'LOGIN_IN_DONE' //登录成功
export const LOGIN_IN_ERROR = 'LOGIN_IN_ERROR' //登录出错
export const LOGOUT_OUT_DONE = 'LOGOUT_OUT_DONE' //登录出错

（2）action：用户的操作调用action中的方法，action完成相关功能（登录/注册/跳转等），返回对应的type状态。

'use strict';
import * as types from '../constants/loginTypes';
import StorageTool from '../../Component/StorageTool';

export function login(loginUserInfo){
    console.log(loginUserInfo);
    return dispatch => {
        console.log(dispatch)
        dispatch(isLogining());//
        //模拟用户登录
        let result = fetch('https://www.baidu.com/')
                        .then((ret)=>{
                            dispatch(loginSuccess(true,loginUserInfo))
                        }).catch((e)=>{
                            dispatch(loginError(false))
                        })
    }
}

function isLogining(){
    console.log('正在登录....')
    return {
        type:types.LOGIN_IN_DOING
    }
}

function loginSuccess(isSuccess,user){
    console.log('登录成功')
    console.log(user)
    //保存登录用户信息
    StorageTool.save('loginUserInfo',user)
    return {
        type:types.LOGIN_IN_DONE,
        user:user
    }
}

function loginError(isSuccess){
    return {
        type:types.LOGIN_IN_ERROR
    }
}

（3）reducer(纯函数)：处理不同type类型下的状态，对与页面关联的状态进行改变

'user strict'
import * as types from '../constants/loginTypes';
const initialState = {
    status: '点击登录',
    isSuccess: false,
    user: null
}
export default function loginIn(state = initialState, action) {
    console.log('loginIn=========')
    console.log(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: true,
                user: null
            }
            break;
        default:
            return state
    }
}

创建index.js对reducer统一管理

'use strict';
import {combineReducers} from 'redux';
import loginIn from './loginReducer';

import registerApp from './registerReducer';
import logout from './logoutReducer';

const rootReducer = combineReducers({
    loginIn:loginIn,
    register:registerApp,
    logout:logout
})
export default rootReducer

以上完成对type、action、reducer的处理，下面是如何将这些关联在一起

（4）store：创建全局使用的store

'use strict';
import {createStore,applyMiddleware} from 'redux';
/*
    redux-thunk中间件可以让action创建函数先不返回一个action对象，
    而是返回一个函数，函数传递两个参数(dispatch,getState),
    在函数体内进行业务逻辑的封
*/
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;
}

（5）、Root.js中设置store

import React, { Component } from 'react';
import {Provider} from 'react-redux';
import configureStore from './store/ConfigureStore';
import App from './container/App';

const store = configureStore();
export default class Root extends Component {
  render() {
    return (
      <Provider store = {store}>
          <App />
      </Provider>
    )
  }
};

（6）page中使用connect函数将reactNative 和 redux关联

import {connect} from 'react-redux';
export default connect(
    (state)=>({
        status:state.loginIn.status,
        isSuccess:state.loginIn.isSuccess,
        user:state.loginIn.user
    }),
    (dispatch)=>({
        login:()=>{
            dispatch(loginAction.login())
        }
    })
)(LoginPage)

（7）使用，从props取出方法，直接调用

 const { login } = this.props
        login(loginUserInfo)