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

Question

我无法理解如何最好地将Redux-Saga与React-Navigation 结合使用。

来自 Redux-Saga 文档：

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

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

在 React-Navigation 的 redux 集成部分，它链接到这个示例，该示例显示 Redux 在没有 redux-saga 的情况下使用。在这个例子中，组件直接将动作分派给 reducer，没有中间件。

IE

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-saga 一起使用。我认为这需要 connect() 包装器中的 mapDispatchToProps 选项。

2) 全有或全无，并确保所有内容都通过 redux-saga 进行调度，以便操作和减速器尽可能保持纯净。不过，这对于导航来说感觉不必要地复杂。

你认为哪种做法更好？

Answer 1

不确定您是否已经完全掌握了传奇的概念。使用传奇，您可以声明某些操作的副作用，这些副作用可能会调度其他操作。但你不会改变你执行行动的方式。而且这与导航无关。导航没有任何副作用，它是带有减速器的纯粹状态操作。当然，某些导航操作可能会触发加载数据的副作用。然后，您可以对那些具有副作用的特定操作使用传奇。但这就像任何其他副作用一样。因此，您关于使用 redux saga 的决定应该与您的导航解决方案无关。

一般来说，传奇会对触发副作用并可能调度其他操作的操作做出反应。减速器将通过改变状态来对动作做出反应，而不会产生副作用。

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