React-native 中相同状态的多个实例答案

【问题标题】：Multiple instances of same state in React-nativeReact-native 中相同状态的多个实例
【发布时间】：2017-05-14 14:51:40
【问题描述】：

我有显示“我的用户个人资料页面”的组件。在这个组件里面我有一个按钮。单击此按钮时，此按钮将使用操作函数向我的关注者显示另一个组件。

在我的关注者列表组件中，我可以点击每个关注者并使用用户个人资料组件打开他的个人资料，并显示此关注者的信息和他的个人资料。一切正常，直到我点击返回。然后我看到一个不属于我的关注者列表，但属于我刚刚点击回来的个人资料。

因为减速器正在将状态重写给我当前正在查看的任何人，如果我转到其他用户的关注者页面并点击其他人，我会看到相同的行为。我想我需要保存以前用户的关注者列表和以前的个人资料，或者可能是在减速器中复制以前的状态，但我不知道如何。

我在后端使用 Wilddog，它类似于 Firebase，但适用于中国。我已将所有文件附加到下面链接的 GIST。

似乎解决方案应该是显而易见的，但我没有得到解决它的诀窍。

https://gist.github.com/myfailemtions/0c4b79fef1aa5e6d67d3f828717474f5

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

在我看来，有问题的代码可能如下：

class Followers extends Component {

  componentWillMount() {
    const {uid} = this.props.user;
    this.props.followersFetch({uid});
    this.createDataSource(this.props)
  }

  componentWillReceiveProps(nextProps) {
      this.createDataSource(nextProps)
  }

  // ..omitted

}

看起来您在安装组件时获取了更新的列表，但忘记了更新道具的时间。将this.props.followersFetch(nextProps({this.props.user.uid}); 添加到您的componentWillReceiveProps 可能会修复该错误。

如果您担心对服务器进行多次调用，则需要在 reducer 中实现缓存。现在你的代码 sn-p 表明你正在用你的追随者获取覆盖你的整个状态（？！） - 这可能不是你想要的。如果您只想回滚到以前的状态，那么将您的状态存储在像 Immutable.js 这样的库中可能就是您想要的。

编辑

对现有操作的快速而肮脏的修改以存储以前的状态。这样做将需要重构您的大部分视图，因为它不再在您获取关注者时删除归约器管理的所有状态。

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FOLLOWING_FETCH:
          //Following lines updates state, rather than rewrites it
          return { 
                   ...state,
                   cachedFollowers: state.cachedFollowers.push(action.payload)
                 };
        default:
            return state
    }
};

警告：以上代码未经测试

【讨论】：