React Native 开发豆瓣评分（三）集成 Redux

什么是 redux

redux 是一个用于管理 js 应用状态（state）的容器。比如组件 A 发生了变化，组件 B 要同时做出响应。常见的应用场景就是用户的登录退出操作：未登录状态，个人中心显示登录按钮，在登录页面进行了登录后，需要在个人中心页面做出相应，显示个人信息。类似的产品有： vuex、flux、dva、mobx。

redux 常见为三个部分：

• Action：存放改变 Store 内容的方法，想要改变 Store 里面的数据，只能触发 Action 里面的相关方法；
• Reducer：根据 Action 操作做出不同的响应，返回一个新的 Store；
• Store：储存数据。

在本应用里使用 redux 主要用于保存用户状态、保存首页数据。

在 React Native 里面使用 redux

安装相关依赖

yarn add redux redux-persist react-redux

• redux 、react-redux：用于存储应用状态；
• redux-persist：用于离线存储状态，退出应用后再次进入应用，状态任然存在。

编辑 Action

在 src 目录下创建 action 目录，目录中创建 index.js。

这里创建 2 个应用中要用到的方法，login（登录）、logout（退出）；2 个测试 redux 是否生效的方法，add（加大数字）、cut（减少数字）。

export function add(num) { // 每个函数的返回值里面必须得有一个type值，Reducer就是根据type值改变做出相应
    return {
        type: 'add',
        value: ++num
    }
}

export function cut(num) {
    return {
        type: 'cut',
        value: --num
    }
}

export function login(data) {
    return {
        type: 'login',
        data
    }
}

export function logout(data) {
    return {
        type: 'logout',
        data
    }
}

编辑 Reducer

在 src 目录下创建 reducer 目录，目录中创建 index.js/num.js/user.js。

index.js

import { combineReducers } from 'redux';
import num from './num';
import user from './user';

//这里返回的combineReducers()就是 Store 的内容，后面想要获得的话，就是使用 store.user、store.num来获得对应store的数据
export default combineReducers({
    num: num,
    user: user
})

num.js

const initState = {//初始化state内容
    value: 0
}

const setNumState = (state = initState, action) => {
    switch (action.type) {//根据type的不同做出不同的响应
        case 'add':
            return {
                ...state,
                value: action.value,
                status: 'add'
            }
        case 'cut':
            return {
                ...state,
                value: action.value,
                status: 'cut'
            }
        default://必须得有default，用于返回非期望的状态
            return state;
    }
}

export default setNumState;

user.js

const initState = {
    isLogin: false,
    userData: {}
}

const setUserState = (state = initState, action) => {
    switch (action.type) {
        case 'login':
            return {
                ...state,
                isLogin: true,
                userData: action.data
            }
        case 'logout':
            return initState;
        default:
            return state;
    }
}

export default setUserState;

编辑 Store

在 src 目录下创建 store 目录，目录中创建 index.js。

import { AsyncStorage } from 'react-native';
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import hardSet from 'redux-persist/lib/stateReconciler/hardSet';
import reducer from '../reducer';

//配置redux-persist，但下次进入应用，就会从root里面获得数据
let persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    stateReconciler: hardSet
}
const persistedReducer = persistReducer(persistConfig, reducer);
export default function configureStore() {
    const store = createStore(persistedReducer);
    let persistor = persistStore(store);
    return { store, persistor };
}

修改 App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './store';
import Router from './router';

const store = configureStore();

export default class App extends Component {
  render() {
    return (
      <Provider store={store.store} style={{ flex: 1 }}>
        <PersistGate loading={null} persistor={store.persistor}>
          <Router />
        </PersistGate>
      </Provider>
    );
  }
};

修改 pages 里面的 index.js detail.js 以测试 redux 是否生效

import React from "react";
import { View, Text } from "react-native";
import { connect } from 'react-redux';
import { add, cut } from '../action';

class Home extends React.Component {
  render() {
    const { dispatch, value, navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text onPress={() => navigation.push('Detail')}>Home Click Me</Text>
        <View style={{ flexDirection: 'row', width: 300, justifyContent: 'space-around' }}>
          <Text onPress={() => dispatch(add(value))} style={{ backgroundColor: 'blue', color: '#fff', fontSize: 18 }}>减少数字</Text>
          <Text style={{ fontSize: 20 }}>{value}</Text>
          <Text onPress={() => dispatch(cut(value))} style={{ backgroundColor: 'blue', color: '#fff', fontSize: 18 }}>加大数字</Text>
        </View>
      </View>
    );
  }
}

const select = (store) => {
  return {
    value: store.num.value,
  }
}

export default connect(select)(Home);

效果图：

这里是一个集成了 router、redux、icons的基本工程，clone下来就能使用 https://github.com/hulinNeil/react-native-base;