【ReactとRedux利用】ドロップダウンリストを作成し、その値を各項目に関連づけたいです。

Question

今、ReactとReduxを用いて、簡単なメモアプリの作成をしております。
追加したメモ1つずつに、分類タグのようなものを設置したく、それぞれのメモの横にドロップダウンリストを作成し、選択したら、その値が設定されるという仕組みを実装したいと考えております。
しかし、どうしてもその方法が見つかりません。インターネットで検索してみたりYouTubeのコーディング動画等も見てみたのですが、自分が実行しようと思っていることとは違うものであったため、困っています。
Redux Persistも利用しています。
もし方法をご存知の方がいらっしゃいましたら、ヒントだけでもご教授頂けますと幸いです。

以下、レデューサとストアを作成したファイルです。追加・削除・検索機能は実装済みです。

// 初期値(ステートの値)の設定
const initData = {
    data: [], // 空の配列。初期画面。
    mode: 'default',
    fdata: []
};

// レデューサーの作成
export function memoReducer(state = initData, action) {
    switch (action.type) {
        case 'ADD':
            return addReduce(state, action);
        case 'DELETE':
            return deleteReduce(state, action);
        case 'FIND':
            return findReduce(state, action);
        default:
            return state;
    }
}

// 追加・削除・検索のレデュース処理(上記のcaseのreturn)

// メモ追加のレデュース処理
function addReduce(state, action) {
    let d = new Date();
    let f = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    let data = {
        message: action.message,
        created: f
    };

    let newData = state.data.slice(); // 配列のコピー
    newData.unshift(data); // dataという連想配列をnewDataという連想配列の先頭に追加。
    return {
        data: newData, // dataが先頭に追加された後のnewData。
        message: 'Added!',
        mode: 'default',
        fdata: []
    };
}

// メモ削除のレデュース処理
function deleteReduce(state, action) {
    let newData = state.data.slice();
    newData.splice(action.index, 1); // // spliceは要素の削除・置き換え。
    return {
        data: newData,
        message: 'Deleted!',
        mode: 'delete',
        fdata: []
    };
}

// メモ検索のレデュース処理
function findReduce(state, action) {
    let f = action.find;
    let fdata = [];
    state.data.forEach((value) => {
        if (value.message.indexOf(f) >= 0) {
            fdata.push(value); // indexOfは、引数と同じ内容の要素の最初のインデックスを返す。
        }
    });
    return {
        data: state.data,
        message: 'Find',
        mode: 'find',
        fdata: fdata
    };
}

// アクションクリエーター作成。dispatchで引数として渡すアクションを作成。
// そのままdispatchなどで送信され、レデューサーによってそれぞれの処理を実行する。

// メモ追加のアクション
export function addMemo(text) {
    return {
        type: 'ADD',
        message: text
    }
}

// メモ削除のアクション。削除するメモのインデックス番号を渡して呼び出す。indexのnumは引数の番号。
export function deleteMemo(num) {
    return {
        type: 'DELETE',
        index: num
    }
}

// メモ検索のアクション。検索テキストを渡して呼び出す。
export function findMemo(text) {
    return {
        type: 'FIND',
        find: text
    }
}

// ストアを作成
export default createStore(memoReducer);

利用環境

MacBook Pro
エディタ：VSCode
ブラウザ：Google Chrome

稚拙な質問になってしまい、申し訳ございません。
ご回答お待ちしております。

補足

想定している挙動と致しましては、
1.ユーザーがメモとして残したい内容を入力欄に入力する。
2.ユーザーがADDボタンを押すと、検索・削除のフォームの下にある空白の部分に、
入力された内容(メモ)が表示される。
3.メモが表示されると、同時にそのメモの横にドロップダウンリストが表示される。
4.ドロップダウンリストの内訳は、Work・Vacation・Moneyの3種類となっており、
それらのうち、ユーザーが選択したリストが表示された状態になる。
お金関係であれば、Money、仕事関連であれば、Workということです。

例)ユーザーが、「500円割り勘払う」と入力。ドロップダウンリストではMoneyを選択。
この場合、以下のように表示される想定です。(「|」は境目として念のため記載しています。)
「500円割り勘払う」 |追加時刻|ドロップダウンリストでMoneyを選択したので、Moneyを表示

凄く簡潔に言ってしまいますと、メモの内容と、MoneyやWorkといったその内容のジャンル(関連すること)を表示することを考えています。

以下、CodeSandboxで再現致しました、現状です。追加・削除・検索機能はすでに実装完了しております。
https://codesandbox.io/s/admiring-golick-nm6vx?file=/reduxmemoapp/src/Store.js

Comments

[anozon]

https://codesandbox.io などで最小限の再現できますか？
想定してる挙動と実際の説明を増やしてほしいです。

[退会済みユーザー]

ご依頼ありがとうございます。
補足に追加致しました。ご確認お願い致します。
不備等あれば、またおっしゃってください！

Answer 1

実現したい機能を正確に把握出来ていない部分もあるのですが、それぞれのメモにタグを持てるようにするのであれば、現状のデータ構造ですと短絡的ですが、ストアのstateのdataの配列の要素のオブジェクトにタグ用のプロパティを追加するのはどうでしょうか？

Comments

[退会済みユーザー]

回答してくださり、ありがとうございました。時間はかかりましたが、なんとか実装できました。