【前端踩过的坑】react-navigation 与redux的配合

在初期使用redux的过程中，想要搭配react-navigation使用（以下简称RN，不是react-native），RN负责路由，而redux负责state的统一管理。基本的思路是：
PS:为了关注核心删去了不必要的部分

const ListStack = createStackNavigator(
  {
      Home: ListScreen
      Add: AddScreen,
  },
  ...
);
const mapStateToProps = state => {
  return {
    dataList: state.list
  }
}


const mapDispatchToProps = dispatch => {
  ...
}

export default connect(mapStateToProps, mapDispatchToProps)(ListStack);

接下来问题就来了，想要传给ListScreen这个component的dataList属性是永远传不到了，而能获取到的（如果你在ListScreen打印props的话会发现只有navigation的属性）。也就是createStackNavigator完全屏蔽了connect传进来的参数，解决方案当然也很简单，调整一下顺序即可：

const ListStack = createStackNavigator(
  {
      Home: connect(mapStateToProps, mapDispatchToProps)(ListScreen),
      Add: AddScreen,
  }
  ...
);

export default ListStack;

这样就解决了，但是就是这些回想起来看似简单，而在实际开发中又浪费了我们太多时间google和思考。回想一下RN和redux在数据传递上还真有点像，RN通过props传递导航及跳转信息，redux通过redux传递state数据，所以就产生了冲突，在第一个例子中，RN的state将redux的给屏蔽了。react-navigation的官网倒是有一篇文章叫redux integration,不过讲的是如何将redux和RN统一，而不是咱们所需要的互相独立兼容。