Redux状態は変わりますが、無効にする必要はありません。

Question

問題があります。私は単純なグリッドを持っており、グリッドは還元状態からデータを取得します。しかし、私が並べ替えると、私のデータは州で変化していることに気がつきました。コードの ここビット

減速：

const gridOptions = { 
columns: ["id", "name", "lastname"], 
data: [ 
    {id: 1, name: "test", lastname: "test2"}, 
    {id: 2, name: "test1", lastname: "test3"} 
], 
sortBy: {}, 
filter: {} 
} 

const rootReducer = combineReducers({ 
data: function (state = gridOptions.data, action) { 
    return [...state]; 
}, 
selectedRow: function (state = {}, action) { 
    switch (action.type) { 
    case "ROW_SELECTED": 
    return action.data 
    default: 
    return state 
} 
}, 
sortBy: function (state = gridOptions.sortBy, action) { 
switch (action.type) { 
    case "SORT_CHANGE": 
    return Object.assign({}, action.column); 
    default: 
    return state; 
} 
}, 
columns: function (state = gridOptions.columns, action) { 
return state; 
}, 
filter: function (state = gridOptions.filter, action) { 
    return state; 
} 
}) 

const store = createStore(rootReducer); 

コンテナコンポーネント。私はそれが少し乱雑であることを知っています。

var mapStateToProps = (state) => { 
return { 
    data: (() => { 
    if (!state.sortBy) { 
    return state.data 
    } else { 
    return state.data.sort() 
    } 
    })(), 
    selectedRow: state.selectedRow, 
    sortBy: state.sortBy 
} 
} 

var mapDispatchToProps = (dispatch) => { 
return { 
    onRowSelected: data => dispatch({type: "ROW_SELECTED", data}), 
    onSortChange: column => { 
    dispatch({type: "SORT_CHANGE", column}) 
    }, 
    onFilter: filterText => { 
    dispatch({type: "FILTER_CHANGE", filterText}) 
    } 
} 
} 

ここで質問します。何らかの理由で私は理解できません...もしconsole.logにstate.data ...ソートされるたびに、state.dataは突然起こります。しかし、本当の問題はです。どうして？それとも私はreduxに納得できないのですか？

Answer 1

あなたは.sort()が実際にそれがsays

ソート（）メソッドが所定の位置に配列の要素をソートし、配列

を返すんどのだからあなたmapStateToPropsが実際に見ている場合状態を突然変異させる。あなたがこれをやめないようにするためには、あなたは自分自身を変えられない状態に保つ必要があります。

これは、それをソートする前に、配列をクローニングする

return [...state.data].sort() 

またはいくつかの他の方法（例えば）を使用することによって解決されなければなりません。あなたはこれらの2行を実行すると、出力

var a = [2,1]; console.log(a.sort()); console.log(a) 
var a = [2,1]; console.log([...a].sort()); console.log(a) 

を比較することで、ブラウザのコンソールでこれを複製することができます

最初のものは、第二はしません、元の配列を変更します。