投稿を取る、好き嫌いをするRedux還元剤

Question

私はReduxとReact Nativeのような機能を作りました。私は初期状態posts = []と私の減速で減速が

const initialState = { 
    posts: [] 
}; 

function postReducer(state = initialState, action) { 
    switch (action.type) { 
    case FETCH_POSTS: 
     return { 
     ...state, 
     posts: action.posts 
     }; 

    case LIKE_POST: 
     return { 
     ...state, 
     posts: state.posts.map(post => { 
      if (post._id === action.postId) { 
      return { 
       ...post, 
       likes: !!post.likes ? post.likes.concat(action.userId) : [action.userId] 
      } 
      } 
      return post; 
     }) 
     }; 

    case UNLIKE_POST: 
     return { 
     ...state, 
     posts: state.posts.map(post => { 
      if (post._id === action.postId) { 
      return { 
       ...post, 
       likes: post.likes.filter(userId => userId !== action.userId) 
      } 
      } 
      return post; 
     }) 
     }; 

    default: 
     return state 
    } 
}; 

のように見えてきた

私は私の状態でposts配列を変異させることができないことを知っているので、私は、私の記事の新しい配列を返す必要がユーザーが好き/好きではないようにしようとする投稿を変更しました。

非常にうまくいくようですが、それは遅いです。私は唯一の記事がほとんどありませんが、私はそれが目に見えるようにするためにまだ1秒ほど待たなければなりません。

これは正しいアプローチですか？州の単純な配列として投稿を正しく保存していますか？私は代替策が何であるかは分かりませんが、例えば、このGitHub repoに見られるように、私はそれの構造を完全には理解していませんが、別の方法で行うことができます。

Answer 1

あなたは、これは遅くて退屈であることを右ですが、あなたは状態を変異し、提案されている正しいパターンに付着しないようにしたい場合は、それが必要です。あなたはいくつかのオプションを持っていると述べた

は、明らかに1あなたが直面する共通の問題を解決するためのヘルパーfunctionsを作ることです、しかし、（個人的に）より良い解決策は、ImmutableJSを使用することです。これは3つの事を提供します：

最初はそれがすべての変更が新しい、別のコピーを返すよう、あなたが状態を変異されていない保証です。

二つ目は、あなたがバニラはJavaScriptを回避するために厄介な構文を使用するのではなく、簡単にあなたの変異を行うことができます便利なAPIです。

第三は、マイナーな利点の詳細ですが、あなたは私はあなたが宣言することができ、各減速状態で使用するrecomment Recordsを使用して独自の型を定義するようなList、Map、Collectionsの多様性と不変のタイプ、へのアクセスを取得状態の形状を変更し、新しいプロパティを追加するのではなく、定義されたプロパティのみを変更します。

Immutableであなたの減速の単一部品は、次のようになります。あなたが持っているだろうので、あなたは、Recordを離れてあなたの状態を構築する場合

case FETCH_POSTS: 
    return state.set('posts', action.posts); 
case LIKE_POST: 
    let posts = state.posts.map((p) => { 
     if (p.id === action.postId) { 
     return p.set('likes', 'something'); 
     } 
     return p; 
    } 

それも、よりエキサイティング取得します。

export default Record({ 
    posts: List(), 
}, 'SocialRecord'); 

これは、あなたがstate.get('posts')やstate.postsを持っているし、まだRecord sがgettersを持っているようimmutable機能を持たせます。

は、より多くの情報のためにドキュメントをチェックアウト：

Immutable Documentation