React-nativeの同じ状態のインスタンスが複数ある

Question

私のユーザープロファイルページを表示するコンポーネントがあります。このコンポーネントの中にはボタンがあります。このボタンをクリックすると、アクション機能を使用して、フォロワーと別のコンポーネントを表示します。

私のフォロワーのリストを持つコンポーネントの中で、私はフォロワーをクリックし、ユーザープロファイルコンポーネントで彼のプロフィールを開き、このフォロワーの情報とプロフィールを表示できます。クリックするまで、すべて正常に動作します。それから私は私のものではないが、私がちょうどクリックしたプロフィールに属するフォロワーのリストを見る。

還元剤が私が現在見ている人に状態を書き換えているので、他のユーザーのフォロワーページに行き、他の人にクリックすると、同じような動作が見られます。以前のユーザーのフォロワーリストと以前のプロファイルを保存する必要があると思います。あるいは、以前の状態をレジューサーにコピーするようなものかもしれませんが、どうすればよいか分かりません。

私はWildbaseをバックエンドに使用しています。これはFirebaseと似ていますが、中国向けです。下にリンクしているGISTにすべてのファイルを添付しました。

解決策は明らかであるようですが、私は解決策を得ていません。それが問題とコードのように私には見えます

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

Answer 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 

} 

小道具が更新されます。 componentWillReceivePropsにthis.props.followersFetch(nextProps({this.props.user.uid});を追加すると、おそらくこのバグが修正されます。

サーバへの複数の呼び出しを心配している場合は、減速機にキャッシュを実装する必要があります。今すぐあなたのコードスニペットは、状態全体（？！）をフォロワーフェッチで上書きしていることを示しています。これはおそらくあなたが望むものではありません。以前の状態にロールバックするだけの場合は、Immutable.jsのようなライブラリを使って状態を保存することができます。

EDIT

以前の状態を保存するために、既存のアクションへの迅速かつ汚い修正。このようにすると、フォロワーをフェッチするたびにレデューサーが管理するすべての状態を削除しなくなるため、ほとんどのビューをリファクタリングする必要があります。

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

注意：上記のコードは未検証

あります