React-native中具有相同状态的多个实例

时间:2017-05-14 14:51:41

标签: reactjs react-native redux

我有我显示我的用户个人资料页面的组件。在这个组件里面我有一个按钮。单击时,此按钮使用动作功能向我的粉丝显示另一个组件。

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

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

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

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

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

1 个答案:

答案 0 :(得分: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中实现缓存。现在你的代码片段显示你用你的追随者获取覆盖你的整个状态(?!) - 这可能不是你想要的。如果您希望回滚到以前的状态,那么使用Immutable.js这样的库存储您的状态可能就是您要找的。

修改

对现有操作进行快速而脏的修改,以存储以前的状态。这样做将需要重构您的大部分视图,因为每当您提取关注者时,它都不会删除reducer管理的所有状态。

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
    }
};

警告:以上代码未经测试