ReduxのStateの更新の仕方がわからない

Question

前提・実現したいこと

React+Reduxで、ファイルに関する情報を記録する簡単なアプリを書いています。
しかし、次のような配列とオブジェクト構造を持ったStateの一部を更新するreducerをどう書くのが良いのか分か、また、payloadとして何を渡すのが適切なのか悩んでいます。
教えていただけると有り難いです。宜しくお願い致します。

該当のソースコード

Reducer

const initialState = [
  {
    id: 1,
    projectName: 'タナカのプロジェクト',
    files: [
      { id: 1,
        fileName: 'タナカのfileName1',
        fileDesc: 'タナカのfileDesc1',
      },
      {
        id: 2,
        fileName: 'タナカのfileName2',
        fileDesc: 'タナカのfileDesc2',
      },
    ],
  },
  {
    id: ２,
    projectName: 'スズキのプロジェクト',
    files: [
      { id: 1,
        fileName: 'スズキのfileName1',
        fileDesc: 'スズキのfileDesc1',
      },
      {
        id: 2,
        fileName: 'スズキのfileName2',
        fileDesc: 'スズキのfileDesc2',//例えばココの内容を変更したい
      },
    ],
  },


const updateFile = (state, payload) => {
  //ここの書き方がわからないです。
}

//参考　ちなみにproject自体の更新に関しては以下のように記述しています。
const updateProject = (state, payload) => {
  return [
    ...state.filter( project => project.id !== payload.project.id), payload.project
  ]
} 
//参考以上

export default createReducer(initialState, {
  [UPDATE_FILE]: updateFile,
})

ActionCreator

export const updateFile = (?) => {
  return {
    type: UPDATE_FILE,
    payload: {
     //上に合わせてここをどう書けば良いでしょうか？
    }
  }
}

//参考　projectの更新
export const updateFile = (project) => {
  return {
    type: UPDATE_PROJECT,
    payload: {
      project
    }
  }
}
//参考以上

Const

export const UPDATE_FILE = 'UPDATE_FILE';

ReducerUtil

export const createReducer = (initialState, fnMap) => {
  return (state = initialState, { type, payload }) => {
    const handler = fnMap[type];
    return handler ? handler(state, payload) : state
  }
}

Answer 1

こんにちは。以下のような感じになるかと思います。

ご質問のコードにある //例えばココの内容を変更したい の fileDesc を変更するためには、stateの配列の中から、指定されたproject id の要素の持つ files の中で、指定された file id に該当するオブジェクトの fileDesc を更新する必要があるので、ActionCreator のupdateFile の引数には、まず

• projectId: number
• fileId: number

の2点が必要です。さらに変更後の値を指定するために、

• props: { fileName?: string, fileDesc?: string }

も受けつけるようにします。そうすると、以下のようになります。

export const updateFile = (projectId: number, fileId: number, props: { fileName?: string, fileDesc?: string }) => {
  return {
    type: UPDATE_FILE,
    payload: {
      projectId,
      fileId,
      props
    }
  }
}

たとえばご質問にある //例えばココの内容を変更したい の場合、 以下のように引数を渡します。

// プロジェクトIDが2の要素に含まれるfilesに含まれるファイルIDが2のオブジェクトのfileDescを"変更後の文字列" に変更する。
updateFile(2, 2, { fileDesc: '変更後の文字列' })

上記のようにActionCreatorの updateFile を作成した場合、Reducer の updateFile は、たとえば以下のように書けます。

const updateFile = (state, payload) => {
  return state.map(proj => {
    if (proj.id ===  payload.projectId) {
      const files = proj.files.map(file => {
        if (file.id ===  payload.fileId) {
          return { ...file, ...payload.props };
        }
        return file;
      });
      return { ...proj, files };
    }
    return proj;
  })
}

以上、参考になれば幸いです。

Comments

[action_moto]

回答ありがとうございました。
typescriptが書けないのでjavascriptですが、正しく処理できるように書けました。
初めてのreduxのため、どこに処理を書いたらいいのか等迷いましたが、今回のことでスッキリと納得できました。
また、spread構文の理解が深まりました。
同じように、createFile,deleteFileを書いて行こうと思います。
ありがとうございました。

[jun68ykt]

どういたしまして。
Redux の state にしても、React.Component の this.state にしても、state を更新するロジックを書くときに、スプレッド構文および配列の map , filter はよく使います。書き方のコツとして、今回の場合でいえば、詳細部分のコードはさておき、

const updateFile = (state, payload) => {
return state.map(proj => {

// TODO 該当のproj だったら、新しいオブジェクトを作ってreturn

return proj;
　 })
}

といったような骨組みのコードを、まずは先に書いてしまってから、 TODO 部分を埋めていくという進め方で書くとよいかもしれません。ただし、createFile　や deleteFile も同じパターンの return state.map(･･･ で書けるかというと、そうとも限りませんが。ともあれ

> 今回のことでスッキリと納得できました。

とのことでよかったです????

[action_moto]

ありがとうございました！！