オブジェクトタイプstate、ReduxによるCRUDの実装

最近TOYプロジェクトをやっていて、reduxを使ってオブジェクトタイプのstateを管理する必要があることがあります.この過程で学んだことをポスターに残して整理したいと思います.
私の国
本来はリストタイプでstateを管理していますが、時間の複雑さの観点からも、dickshernerタイプの開発も容易であるため、storeのstateを大幅に変更しました.
だからどんな顔をしているのか.

clubs: {
	clubId : {
		clubTitle: '제목',
		clubDescription: '내용'
	},
	clubId : {
		clubTitle: '제목',
		clubDescription: '내용'
	}
}

実はそんなに簡単ではありませんが、説明しやすいように簡単に表示します!stateには各クラブを区分するclubIdがあり、クラブ情報を含む対象もある.つまり、clubIDはKey、{clubTitle, clubDescription}はValueです.
KeyValue、レンダリングValue
私の州にはclubの情報がたくさんあります.stateのタイプがKey:Valueタイプのオブジェクトでない場合、map()にマッピングして各要素を出力できますが、オブジェクトはより簡単な処理が必要です.
Object.entries()
Object.entries:配列形式で[key,value]を返す
Object.keys:keyのみ戻る
Object.values:valuesのみを返しますmap()関数は、オブジェクトをリスト形式で返す必要があるリストに使用できます.したがって、オブジェクト.entriesとして[key,value]を返します.次に返される値をマッピングすると、所望の結果が得られます.

{Object.entries(props.clubs).map(([key, value]) => (
	<div key={key}>
		<h1>{value.clubTitle}</h1>
		<h1>{value.clubDescription}</h1>
	</div>
))}

CRUDの正式実施
ただし、readはuseSelectorを使用すればよいので、create、update、deleteについて説明します.
アクションの定義

export const ADD_CLUB = 'ADD_CLUB';
export const DELETE_CLUB = 'DELETE_CLUB';
export const EDIT_CLUB = 'EDIT_CLUB';

let nextId = Math.floor(Math.random() * 10000000);

export const addClub = (clubTitle, clubDescription) => {
    return {
        type: ADD_CLUB,
        clubId: nextId++,
        club: {
            clubTitle,
            clubDescription
        }
    }
}

export const deleteClub = (clubId) => {
    return {
        type: DELETE_CLUB,
        clubId
    }
}

export const editClub = (clubId, clubTitle, clubDescription) => {
    return {
        type: EDIT_CLUB,
        clubId: clubId,
        club: {
            clubTitle,
            clubDescription
        }
    }
}

addClubからclubId: nextId++までの理由は、リフレッシュされていないときに他の値を入力するためです(オブジェクトのKey値をユニークにします).
また,各関数のパラメータは直感的に分かりやすいと考えられるので,さらなる説明は必要ない.これでactionが定義され、reduceが定義されて終わります!
create reducer

case ADD_CLUB:
	const newData = {};
	newData[action.clubId] = action.club;
	return Object.assign({}, state, newData);

新しく追加されたclubオブジェクトを作成し、Object.assign()を使用して元のステータスと新しく追加されたclubオブジェクトをマージします.
delete reducer

case DELETE_CLUB:
	const deleteState = {...state};
	delete deleteState[action.clubId];
	return deleteState;

{...state}で再割り当てを行い、stateに直接削除するのではなく、必要な値を削除します.重要なのはstateを直接操作しないことです!
update reducer

case EDIT_CLUB:
	const editState = {...state};
	editState[action.clubId] = action.club;;
	return editState;

updateはdeleteと非常に似た方法を有する.deleteの場合と同様に、{...state}で再割り当てし、希望するclubIdにアクセスし、新しいclubに更新します.
次に、定義したcreate、delete、update reduceをすべて加算します.以下に示します.

import { INITIAL_STATE } from '../store/store'
import { ADD_CLUB, DELETE_CLUB, EDIT_CLUB } from "../actions"

const clubs = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case ADD_CLUB:
            const newData = {};
            newData[action.clubId] = action.club;
            return Object.assign({}, state, newData);
        case DELETE_CLUB:
            const deleteState = {...state};
            delete deleteState[action.clubId];
            return deleteState;
        case EDIT_CLUB:
            const editState = {...state};
            editState[action.clubId] = action.club;;
            return editState;
        default:
          return state;
      }
};

export default clubs;

リファレンス

https://ywtechit.tistory.com/162

https://stackoverflow.com/questions/35404050/redux-how-to-store-and-update-a-key-value-pair

https://stackoverflow.com/questions/59897667/delete-key-from-state-redux-reducer