誰かがなぜ私たちはReduxで州に直接書き込むことはないのか私に説明しますか？

Question

私は本当に還元されたObject.assign（）と混乱していました。

以下のコードが動作しない理由を私は理解していない...

import { createStore } from "redux" 

const userReducer = function (state={}, action) { 
    switch (action.type) { 
    case "CHANGE_USER_NAME": 
     state.name = action.payload 
     break; 
    case "CHANGE_USER_AGE": 
     state.age = action.payload 
     break; 
    default: 
    } 
    return state; 
} 

const store = createStore(userReducer) 

store.subscribe(() => console.log(store.getState())) 

store.dispatch({ type: "CHANGE_USER_NAME", payload: "paul" }) 
store.dispatch({ type: "CHANGE_USER_AGE", payload: 74 }) // It returned { name: "paul", age: 74 } 
store.dispatch({ type: "CHANGE_USER_NAME", payload: "john" }) // It returned { name: "john", age: 74 } changed name to "john" but age is same. This point. is not immutable object? 

私はちょうど状態の値に直接書き込むが、結果は私が期待値である...

user.nameが変更されましたuser.ageは変更されません。

私には不変なオブジェクトのようです。私が間違っている ？

誰かが私が州に直接書くことがない理由を誰かに説明しますか？ ダミー質問に申し訳ありません。私は理由を試していましたが、理由はわかりません。

Answer 1

新しいオブジェクトを常に返す理由を理解するには、関数型プログラミングで純粋な関数と副作用を理解する必要があります。

純粋な関数は、入力データとして引数をとり、データまたは関数を出力として返します。これにより、入力を変更するのではなく、入力から新しいデータを生成することができます。

このようにして、元の状態は変更されず、代わりに完全に新しい状態オブジェクトに置き換えられ、機能を純粋に保ち、副作用は生じません。

Answer 2

const userReducer = function (state={ 
    name : "", 
    age : "" 
}, action) { 
    switch (action.type) { 
    case "CHANGE_USER_NAME": 
     state ={ 
     ...state , 
     name : action.payload 
     } 
     break; 
    case "CHANGE_USER_AGE": 
     state ={ 
     ...state , 
     age : action.payload 
     } 
     break; 
    default: 
    } 
    return state; 
} 

これは、以前の状態を上書きしないようにデータを状態に保存する正しい方法です。