我应该将 Redux Saga 用于 React Navigation 吗？

Question

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

来自 Redux-Saga 文档：

redux-saga 是一个库，旨在使 React/Redux 应用程序中的副作用（即异步操作，如数据获取和不纯操作，如访问浏览器缓存）更容易和更好。

心智模型是，saga 就像应用程序中的一个单独线程，只负责产生副作用。

在 React-Navigation 的 redux 集成部分，它链接到 this example，这表明 Redux 在没有 redux-saga 的情况下使用。在此示例中，组件直接将操作分派给 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 进行调度，以便 action 和 reducer 尽可能保持纯净。不过，对于导航来说，这感觉是不必要的复杂。

你认为哪种做法更好？

Answer 1

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

一般来说，saga 会对动作做出反应，触发副作用并可能调度其他动作。并且 reducer 将通过更改状态来响应操作，而不会产生副作用。

您的替代方法是在动作创建器中调度动作之前处理副作用（就像 redux-thunk 一样）。还有 redux-observable，它与 redux saga 具有相似的模式，但基于 RxJS 并且不使用 redux saga 具有的 elm 模式。