我应该使用Redux Saga进行反应导航吗?

时间:2017-09-15 19:08:36

标签: javascript react-native react-redux react-navigation redux-saga

我无法理解Redux-SagaReact-Navigation的最佳使用方式。

来自Redux-Saga文档:

  

redux-saga是一个库,旨在使React / Redux应用程序中的副作用(例如数据提取和不正确的事物,如访问浏览器缓存)变得更容易和更好。

     

心理模型是一个传奇就像你的应用程序中的一个单独的线程,它独自负责副作用。

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

的src /组件/ 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 /减速器/ 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发送,因此动作和减速器可以保持尽可能纯净。这对于导航来说感觉不必要复杂。

你认为哪种做法更好?

1 个答案:

答案 0 :(得分:3)

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

一般情况下,一个传奇会对触发副作用的动作做出反应,并可能会调度其他动作。并且减速器将通过改变状态而没有副作用来对动作做出反应。

您可以选择在动作创建者中调度动作之前处理副作用(如redux-thunk)。而且还有redux-observable,它与redux saga具有相似的模式,但是基于RxJS并且不使用redux saga所具有的elm模式。