redux添加到react native项目中

1. 添加依赖
2. 项目结构
3. 编写type
4. 编写action
5. 编写reducer
6. 统一reducer入口
7. 创建store，并注入全局props
8. connect将UI组件包装为容器组件
9. 项目demo

1.添加依赖

需要添加的依赖如下：
redux
react-redux //为了方便使用，Redux 的作者封装了一个 React 专用的库
redux-thunk //中间件，改造store.dispatch，使得后者可以接受函数作为参数。

2.项目结构

项目结构

创建文件夹actions、store、reducers、constants，用于存放后续需要的文件。

3.编写type

文件名：loginType.js

export const LOGIN_IN_DOING = "LOGIN_IN_DOING";//正在登陆
export const LOGIN_IN_DONE = "LOGIN_IN_DONE";//登陆完成
export const LOGIN_IN_ERROR = "LOGIN_IN_ERROR";//登陆出错

在其他文件如何引用：

import * as types from '../constants/loginType'
...
详见编写action

每个action可对应一个type文件。

4.编写action

事件预处理action。在action文件中创建loginAction.js文件。

'use strict'

import * as types from '../constants/loginType'

// 模拟用户信息
let user = {
    name : 'zhangsan',
    age : 24,
}

// 访问登录接口 根据返回结果来划分action属于哪个type,然后返回对象,给reducer处理
export const login = ()=> {
    return dispatch => {
        dispatch(isLogining());
        // 模拟用户登录

        let result = fetch('https://www.baidu.com/')
            .then((res) => {
                dispatch(loginSuccess(true, user)); // 登录请求完成
            }).catch((e) => {
                dispatch(loginError(false)); // 登录请求出错
            })
    }
}

function isLogining() {
    return {
        type : types.LOGIN_IN_DOING
    }
}

function loginSuccess(isSuccess, user) {
    console.log('success');
    return {
        type : types.LOGIN_IN_DONE,
        user : user,
    }
}

function loginError(isSuccess) {
    console.log('error');
    return {
        type : types.LOGIN_IN_ERROR,
    }
}

不同action行为，对应不同的action文件。

5.编写reducer

事件处理过程reduce。针对不同的action行为，在reducers文件中创建对应的reducer文件，如loginReducer.js。

'use strict'

import * as types from '../constants/loginType'

const initialState = {
    status:'点击登陆',
    isSuccess:false,
    user:null
}

// 不同类别的事件使用switch对应处理过程
export default function loginIn(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:true,
                user:null
            }
            break;
        default:
            return state;
    }
    
}

6.统一reducer入口

通过reducer统一入口导出供外部使用;在reducers文件夹下创建index.js文件，内容如下：

'use strict'

import {combineReducers} from 'redux'
import loginIn from './loginReducer'
import counter from './counterReducer'

const rootReducer = combineReducers({
    loginIn:loginIn,
    counter:counter
})

export default rootReducer;//导出，作为统一入口

7.创建store，并注入全局props

在store文件夹中创建ConfigureStore.js文件，定义store。

'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;
}

创建store对象并注入全局props（Provider）

import React, { Component } from 'react';

import {Provider} from 'react-redux'
import configureStore from './store/ConfigureStore'
import {StackNavigator,} from 'react-navigation'
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import LoginScreen from './pages/LoginScreen'
import MainScreen from './pages/MainScreen'

const store = configureStore()
const Navigation = ()=>{
    return (
        <Provider store = {store}>
            <Navigator/>
        </Provider>
    )
}

const Navigator = StackNavigator(
   ...
)

export default Navigation;

8.connect将UI组件包装为容器组件

connect实现视图pages并将其与逻辑部分绑定到一起;

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

import {connect} from 'react-redux'
import {NavigationActions} from 'react-navigation'
import * as loginAction from '../actions/loginAction'


const resetAction = NavigationActions.reset({
    index:0,
    actions:[
        NavigationActions.navigate({routeName:'MainScreen'})
    ]
})

class LoginScreen extends Component {
...
    render() {
        const {login} = this.props;
        return (
            <View style={styles.container}>
                <Text>状态:{this.props.status}</Text>
                <TouchableOpacity onPress={()=>login()} style = {{marginTop:50}}>
                    <Text>登陆</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default connect(//将页面与store内的state、action关联在一起，实现视图部分与逻辑处理部分的关联
    (state)=>({
        status:state.loginIn.status,
        isSuccess:state.loginIn.isSuccess,
        user:state.loginIn.user
    }),
    (dispatch)=>({
        login:()=>dispatch(loginAction.login())
    })
)(LoginScreen)

9.项目demo

https://github.com/boyrt/react-native-redux
该项目参考自：
https://www.jianshu.com/p/8fb7df931eea