在 Redux 中没有 React Navigation 状态的 React Native 中的 Redux

Question

我在 React Navigation 网站上看到了Redux Integration page，但我不明白为什么我们需要将导航状态存储在 Redux 存储中，我们不能将应用程序的状态存储在 Redux 中并让导航器保持自己的状态吗？

因为整合router.getStateForAction()和router.getActionForPathAndParams()看起来很复杂。

• 我有一些疑问，比如我们是否应该为我们拥有的每个网名使用getStateForAction()？为他们每个人创建一个减速器？
• 我们是否应该对根导航器内其他导航器内的嵌套屏幕执行相同操作？
• 那么我们什么时候应该使用router.getActionForPathAndParams()？

谢谢

Answer 1

没有必要在reducer中存储导航状态。如果您不需要，只需将应用程序状态保持在 reducer 和导航状态即可。然后你可以像这样集成 Redux：

// App.js

import React from 'react';
import { Provider } from 'react-redux'
import RootNavigator from './src/navigation/RootNavigation';
import configureStore from './src/stores/configureStore';

const store = configureStore();

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootNavigator />
      </Provider>
    );
  }
}

但实际上，在 Redux 中集成导航状态并没有那么复杂。如果您这样做，导航状态将在您在屏幕之间导航时自动更新。它在复杂的应用程序中非常有用。因此，我将尝试向您解释如何将 React Navigation 和 Redux 一起使用，也许您将来会发现它很有用。

首先，你配置你的 StackNavigator as usual：

// navigation/RootNavigator.js

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default RootNavigator;

然后你去reducers文件夹（如果你有的话）并创建navReducer.js

 // reducers/navReducer.js

import RootNavigator from '../navigation/RootNavigation';

const initialState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams('Home'));

const navReducer = (state = initialState, action) => {
  const nextState = RootNavigator.router.getStateForAction(action, state);

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

我们使用RootNavigator.router.getStateForAction 只是为了获取导航状态并将其设置为新reducer 的初始状态。

然后将reducer与其他的组合起来：

// reducers/index.js

Import navReducer from ‘./navReducer’;

const appReducer = combineReducers({
  nav: navReducer,// updated was nav:nav,
  ...
});

现在我们只需要修改我们的App.js。现在它看起来像：

import React from 'react';
import { Provider, connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import RootNavigator from './src/navigation/RootNavigation';
import configureStore from './src/stores/configureStore';
const store = configureStore();

class AppComponent extends React.Component {
  render() {
    return (
      <RootNavigator navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
      })} />
    );
  }
}

const mapStateToProps = (state) => ({
  nav: state.navReducer
});

const AppContainer = connect(mapStateToProps)(AppComponent);

export default () => {
  return (
    <Provider store={store}>
      <AppContainer />
    </Provider>
  )
}

因此，您不需要用addNavigationHelpers 包装每个组件，只需根组件即可。在屏幕之间导航时，您不需要发送/管理操作。它将自动更新。