我应该使用 Redux Saga 进行 React Navigation 吗？

Question

我无法理解如何最好地使用 Redux-Saga with React-Navigation。

来自 Redux-Saga 文档：

redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects.

在 React-Navigation 的 redux 集成部分，它链接到 this example，它显示了在没有 redux-saga 的情况下使用 Redux。在此示例中，组件将操作直接分派给没有中间件的 reducer。

即

src/components/LoginScreen.js

const LoginScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Screen A
    </Text>
    <Text style={styles.instructions}>
      This is great
    </Text>
    <Button
      onPress={() => navigation.dispatch({ type: 'Login' })}
      title="Log in"
    />
  </View>
);

src/reducers/nav.js

function nav(state = initialNavState, action) {
  let nextState;
  switch (action.type) {
    case 'Login':
      nextState = AppNavigator.router.getStateForAction(
        NavigationActions.back(),
        state
      );
      break;
    case 'Logout':
      nextState = AppNavigator.router.getStateForAction(
        NavigationActions.navigate({ routeName: 'Login' }),
        state
      );
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
      break;
  }

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

考虑到这一点，我看到了两个选择：

1) 将常规操作（导航等）与副作用诱导操作（异步 api 请求）分开，并且仅将后者与 redux-sagas 一起使用。我假设这将需要 connect() 包装器中的 mapDispatchToProps 选项。

2) 孤注一掷，确保一切都通过 redux-sagas 进行调度，以便动作和 reducer 尽可能保持纯净。不过，对于导航来说，这感觉不必要地复杂。

您认为哪种做法更好？

Answer 1

不确定您是否完全掌握了 sagas 的概念。使用传奇，您可以声明某些操作的副作用，这些副作用可能会派发其他操作。但是您不会改变发送操作的方式。这也与导航无关。导航没有任何副作用，它是使用 reducer 的纯状态操作。当然，某些导航操作可能会触发加载数据的副作用。然后你会在那些有副作用的特定动作上使用传奇。但这就像任何其他副作用一样。所以你决定使用 redux saga 应该与你的导航解决方案无关。

一般来说，saga 会对动作做出反应，触发副作用并可能调度其他动作。 reducer 将通过改变状态来对动作做出反应而没有副作用。

你的替代方案是在你在动作创建者中发送动作之前处理副作用（就像 redux-thunk 那样）。还有 redux-observable，它具有与 redux saga 类似的模式，但基于 RxJS，并且不使用 redux saga 具有的 elm 模式。

我应该使用 Redux Saga 进行 React Navigation 吗？

Should I use Redux Saga for React Navigation?

javascript

react-native

redux-saga

react-redux

react-navigation

src/components/LoginScreen.js

src/reducers/nav.js