Question

我正在使用react-redux来实现React Native项目。 React Native Navigator将旧组件保留在堆栈中，但只是为了隐藏屏幕中的组件。同时，如果当前场景使用相同的state.propName，则隐藏的场景也将被更改。当navigator.pop（）到旧场景时，UI正在被更改。

例如，我有两个场景<PostList>和<ImagePostList>，而redux state.posts存储了帖子数据列表。

在<PostList>中，state.posts存储所有类型的帖子（包括图片帖子）。

在<ImagePostList>中，state.posts只存储图片帖子。

当我从navigator.push()到<PostList> <ImagePostList>时，我会通过操作/缩减器获取新的帖子列表并保存到state.posts。

然后我navigator.pop()回到原始<PostList>，州。邮件现在只有图片帖子，因为它被覆盖。

我为react-router / redux-router做了一些跟踪，看起来他们没有这样的问题，因为在Web组件中将会在路由之间卸载/重新安装。

一种可能的解决方案是在推送到新场景时保存原始组件状态。回弹时，使用来自组件状态的数据，而不是使用来自react-redux的props。但是解决方案会增加很多复杂性，因为现在的数据并非来自单一事实。

另一种可能的解决方案是将state.propName与所有路由隔离开来。但我认为现在这不是一个好主意。

任何遇到此类问题的人，请与我分享您的经验。感谢。

Answer 1

我终于转向使用堆栈来存储导航更改之间的状态。由于我使用redux动作来控制导航器（即推送路由或从路径弹出），所以通过reducer-enhancer来实现它很简单。

这个机制非常像redux-undo，但我写了一个更简单的机制。

.wrap{
  display: block; 
  clear: both;
  overflow:hidden;
}

.wrap input,select{
  max-width:100px;
  margin:5px;
}

使用

const ActionTypes = {
  PUSH_ROUTE: 'PUSH_ROUTE',
  POP_ROUTE: 'POP_ROUTE'
};

export default function navAwarable(reducer) {
  var stateStack = [];
  return (state, action) => {
    if (action.type === PUSH_ROUTE) {
      stateStack.push(state);
      return reducer(state, action);
    } else if (action.type === POP_ROUTE) {
      let origState = stateStack.pop();
      return reducer(origState, action);
    } else {
      return reducer(state, action);
    }
  };
};

React Native Navigator保留组件将受到redux状态

1 个答案: