时间戳

首页 > 解决方案 > React Navigation v 2 和 Redux

react-native - React Navigation v 2 和 Redux

问题描述

我一直在我的应用程序中使用 react-native-router-flux 并配置了商店，它就像一个魅力。

我现在计划在我的应用程序中使用 react-navigation v2.8，我正在努力完成 configureStore。

我认为 configureStore 将按原样使用 react-native-router-flux 示例。下面是我工作的 react-native-router-flux 示例中的示例代码。

/* global __DEV__ */
import { Router } from 'react-native-router-flux'; //this is not to be used 
in react-navigation
import { connect } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore } from 'redux-persist';
import ReduxPromise from 'redux-promise';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducers from './index';

connect()(Router); //ROuter is not avaible in react-navigation
let middleware;

if (__DEV__) {
  const logger = createLogger();
  middleware = [thunk, ReduxPromise, logger];
  //middleware = [thunk, ReduxPromise];
} else {
  middleware = [thunk, ReduxPromise];
}

export function configureStore() {
  const store = compose(applyMiddleware(...middleware))(
    createStore
  )(reducers);

  const persistor = persistStore(store);

  return { persistor, store };
}

export const { persistor, store } = configureStore();

标签： react-native

解决方案

React Navigation 可以用作通用的 JSX 组件，可以包含在 中Provider，因此整个 UI 树将在context. 因此，您可以在应用程序的根目录中初始化存储，将其作为状态变量保存在其中，并使用Provider.

使用 React Navigation 配置商店并使其在 UI 树中可用的代码应如下所示：

您的 Root 组件应如下所示

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import AppStack from './app/AppNavigation';
import getStore from './app/store';

export default class App extends Component {
   constructor (props) {
   super(props);
      this.state = {
         store : getStore()
      }
   }


   render() {
      return (
         <Provider store={this.state.store} >
            <AppStack /> . // This is your React Navigation Stack.
         </Provider>
      );
   }
}

你getStore应该看起来像这样：

import { createStore } from 'redux';
import reducers from './reducers';

export default function getStore () {
     const enhancer = compose(
              applyMiddleware(
                //your middlewares here..
              )
     );
     const store = createStore(reducers);
     return store;
}

AppStack 看起来像这样：

import {createStackNavigator} from 'react-navigation';
import FirstScreen from './components/FirstScreen';

export default AppStack = createStackNavigator({
    Screen1: {
        screen: FirstScreen,
        //other routes.... 
    },
});

这只是一个最简单的可能示例。

推荐阅读