Question

我一直在我的应用程序中使用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();

Answer 1

反应导航可以用作可以封装在Provider中的常规JSX组件，因此整个UI树将在context内部具有存储。因此，您只需在应用的根目录中初始化商店，并将其作为状态变量保存在内部并将其使用Provider传递到上下文。

用于配置商店并使之在使用React Navigation制作的UI树中向下可用的代码如下所示：

您的“根”组件应如下所示

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.... 
    },
});

这只是一个最简单的例子。

希望有帮助。祝您编码愉快！

React Navigation v 2和Redux

1 个答案: