JSスプレッド演算子でオブジェクトとか文字列キーで更新したい時

12/11/201925/02/2020

Laravelで作った個人開発サイト
勉強がてらReact/Redux化を進めてます。
適当なので用語とか細かい事はあってるのか不明ですが

特に技術的な事に熱がある方では無いのだけども
覚えないとなーと、どんどん新しい事増えるよね。

スプレッド構文

Reducerで返す
配列とかオブジェクトとかはそのまま更新
しちゃけないお約束らしいです。

// 単純に
state.hoge = "foo";
return state;
// errorでて駄目らしい。

google巡回してると[…hoge]
とかってスプレッド構文っていうのを
最近はよく使うらしい

return {
    ...state,
    hoge: action.payload.value
};

ただアクションとか経由してhogeを文字列キー？で指定したい場合どうすれば良いのかなと思ったら

//こういう感じの事やりたい場合
( key: string ) => {
    state[key] = "foo"
};

Spread syntaxでkey指定

こうすればよいっぽい。

(key: string) => {
    return {
        ...state,
        [key]: "foo"
    };
};

Reducerで使う場合(一部抜粋)

やり方的に正しいのかは知らないけど
こうすれば一応更新できた。

export const reducer = (state: State = initialState, action: Action): State => {
    switch (action.type) {
        case ActionTypes.UPDATE:
            return {
                ...state,
                [action.payload.key]: action.payload.value
            };
        default:
            return state;
    }
};