如何在React Native（React Navigation V2）项目中集成Redux Store

看起来你已经搭好了基础的导航结构，接下来咱们一步步把Redux集成进去，让所有页面都能访问到store：

第一步：安装Redux相关依赖 #

首先得把需要的包装到项目里，打开终端运行：

npm install redux react-redux --save
# 如果需要处理异步操作（比如API请求），还可以装redux-thunk
npm install redux-thunk --save

第二步：创建Redux Store配置 #

在项目根目录新建一个store.js文件，用来配置你的Redux store、reducer和中间件：

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk'; // 如果装了redux-thunk就引入

// 先创建一个示例reducer（你可以根据自己的需求替换成实际的reducer）
const authReducer = (state = { isAuthenticated: false, user: null }, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return { ...state, isAuthenticated: true, user: action.payload };
    case 'LOGOUT':
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
};

// 合并多个reducer（如果有多个的话）
const rootReducer = combineReducers({
  auth: authReducer,
  // 可以添加其他reducer，比如dashboard: dashboardReducer
});

// 创建store
const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 如果用了thunk就加上，没有的话可以只传rootReducer
);

export default store;

第三步：修改App.js，用Provider包裹导航组件 #

现在回到你的App.js，引入Redux的Provider和刚才创建的store，然后把原来的导航组件用Provider包裹起来：

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import { Provider } from 'react-redux'; // 引入Provider
import store from './store'; // 引入咱们创建的store
import Validator from './Validator'; // 确保路径正确
import Login from './Login';
import Dashboard from './Dashboard';

const AppNavigator = createSwitchNavigator(
  { 
    StartupScreen: Validator,
    Login: Login,
    DashBoard: Dashboard
  }, 
  { initialRouteName: 'StartupScreen' }
);

// 用Provider包裹导航组件，传递store
const App = () => (
  <Provider store={store}>
    <AppNavigator />
  </Provider>
);

export default App;

第四步：在页面组件中使用Redux #

现在你就可以在任何页面里通过connect来连接Redux store了，比如在Login页面：

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';

class Login extends Component {
  handleLogin = () => {
    // 触发action，更新store
    this.props.dispatch({
      type: 'LOGIN_SUCCESS',
      payload: { username: 'testUser' }
    });
    // 登录成功后跳转到Dashboard
    this.props.navigation.navigate('DashBoard');
  };

  render() {
    return (
      <View>
        <Button title="登录" onPress={this.handleLogin} />
      </View>
    );
  }
}

// 把store里的state映射到组件的props
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
  user: state.auth.user
});

// 用connect连接组件和store
export default connect(mapStateToProps)(Login);

这样一来，你的整个应用就都能访问到Redux store了，所有页面都可以通过connect来获取状态或者触发action更新状态。

内容的提问来源于stack exchange，提问作者user9869220