Redux状態の突然変異

Question

明らかに私が新しいオブジェクトを渡しているときに、反応が私が状態を突然変異していると思うのはなぜですか？何か不足していますか？ これは、クイズの配列内のクイズオブジェクトに質問を追加することを減らすものです。

case types.UPDATE_QUESTION_SUCCESS: { 
    let quizContext = state.filter(quiz => quiz.id === action.quizId); 
    let filteredQuestions = quizContext[0].questions.filter(question => 
    question.questionId !== action.question.questionId 
); 
    filteredQuestions.push(action.question); 
    quizContext[0].questions = filteredQuestions; 
    let quiz = quizContext[0]; 
    return [...state.filter(quiz => quiz.id !== action.quizId), Object.assign({}, quiz)]; 
} 

エラー：

Invariant Violation: A state mutation was detected between dispatches, in the path `quizes.4.questions.1`. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments) 

Answer 1

まず順になっていた場合には、ネストされた状態を持っていないことを確認している場合Object.assignを使用しています。 これを実行すると、同じ結果が得られます。

const quiz = state.find(quiz => quiz.id === action.quizId); 

ここではあまりにも多くのコードレビューをしたくありませんが、もう1つです。いつでもconstを使用する必要がありますが、letを使用してください。 constというのは、変数を変更できるということだけです。

質問をフィルタリングして追加し、今見つかったクイズに追加します。

quizContext[0].questions =が問題になります。なぜなら、オブジェクトが新しい配列にあってもそれらは同じオブジェクトなので、それらを変更すると状態が変更されるからです。

ですから、このようなものに終わるだろうと完全なもの書き換え

const quiz = Object.assign({}, state.find(quiz => quiz.id === action.quizId)); 

：

case types.UPDATE_QUESTION_SUCCESS: 
{ 
    const quiz = Object.assign({}, state.find(quiz => quiz.id === action.quizId)); 
    quiz.questions = quiz.questions.filter(question => 
    question.questionId !== action.question.questionId 
); 
    quiz.questions.push(action.question); 
    return [...state.filter(quiz => quiz.id !== action.quizId), quiz]; 
} 

しかし、時間のほとんどは、あなたの中のデータをフィルタリングするためにwan'tていないことを心に留めておくと減速機はまったくありません。代わりにreselectを使用して、ストア内のデータから派生データを計算することをお勧めします。

Answer 2

あなたの減速ごとに状態を変異されています。フィルタ関数を使用する場合、フィルタに渡されるオブジェクトは元のオブジェクトの参照であり、ここではdeepCopyを実行していません。そして、この行filterQuestions.push(action.question)は実際に状態を突然変異させています。

代わりにこれを試してみてください。そこに、よりエレガントな解決策があるかもしれません let quizContext = cloneDeep(state.filter(quiz => quiz.id === action.quizId));

が、あなたは間違っている場所です。返されるフィルタされたオブジェクトは、元の配列への参照ですが、新しいオブジェクトは参照されません。だから、あなたは状態の元のオブジェクトを突然変異させることになります。

--More clarification--

cloneDeepあなたは深いマージのみ浅いマージをするつもりはないが、Object.assignを使用している場合lodash機能です。状態はより深いレベルで変異しているときに参照は、あなたの状態が変異されたラインマッシュで述べたように、元の状態

--edit 2--

を突然変異させることによってそこに元のオブジェクトの残っていますquizContext[0].questions = filteredQuestions;と、あなたがたったの約quizContext[0]、filterが過剰ですが気にするので、よりレデューサーは、すべての