React ReduxでObjectの追加・変更・削除、そして再レンダリング

はじめに

react redux でstateを管理しているときObejectのkeyに変数を使った場合の操作に苦戦したので、その備忘録として書きます。
同じように苦戦している方の助けになれば幸いです。

サンプルコード

node v13.7.0
react 16.13.1

目的

こんなObjectを、、、

sample{ 'sample_1' : 1, 'sample_3' : 4}

sample{ 'sample_1' : 5, 'sample_3' : 1, 'sample_2' : 9 }

みたいに変更したい。

action.js

export const ADD_STATE = 'ADD_STATE';
export const CHANGE_STATE = 'CHANGE_STATE';

//{sample_{i} : data}の連想配列を追加する
function add(i, data){
  var key = i;
  var data = data;
  dispatch(addState(key, data));   
}

//sample_{i}の値を data に変更する
function change(i, data){
  var key = i;
  var data = data;
  dispatch(chageState(key, data));
}

const addState = (key, data) => ({
  type: ADD_STATE,
  key,
  data
});

const chageState = (key, data) => ({
  type: CHANGE_STATE,
  key,
  data
});

reducer.js

const initialState = {
  sample: {}
}

export default (state = initialState, action){
  switch(actio.type){
    case 'ADD_STATE':
      const addKey = `sample_${action.key}`;
      var data = {};
      data[addKey] = action.data;
      var newSample = state.sample;
      newSample = Object.assign({}, newSample, data);
      return Object.assign({}, state, {
        sample: newSample
      });

    case 'CHANGE_STATE':
      const changeKey = `sample_${action.key}`;
      var data = {};
      data[changeKey] = action.data;
      var newSample = state.sample;
      delete newSample[changeKe];
      newSample = Object.assign({}, newSample, data);
      return Object.assign({}, state, {
         sample: newSample
      });
   
    default:
      return state;
  }
};

ここでのポイント

var data = {}
data[key] = action.data; // data {key: data}
var newSample = state.sample; //newSample {sample_key: sample_data}

newSample = Object.assign({}, newSample, data) //newSample {sample_key:sample_data, key:data}

Ogjectの変更を Object.assign を使っているところが今回のポイントになりました。

上記の例を使わず連想配列を追加する方法はありますが、その方法では再レンダリングされなかったです。

newSample[key] = action.data; //NG

変更時は、

var data = {};
data[key] = action.data; // data {key:data}
var newSample = state.sample; // newSample {sample_key:sample_data, key:data}
delete newSample[key]; //newSample {sample_key:sample_data}

newSample = Object.assign({}, newSample, data); // newSample {sample_key:sample_data, key:data}

ここでは、一度 delete して変更する対象の連想配列を削除しています。

さいごに

こうして、OBjectの変更して、再レンダリングできました！