@reduxjs/toolkit におけるreducersで同じような処理を重複して書きたくないがどうしたら良いのか分からない

Question

最初にgetPostSuccessでは、２０件のPostsを取得しています。
ReadMoreボタンを押下した際に、readMorePostsNextを実行し、追加でデータを取得するようにしています。
（@reduxjs/toolkit を利用しています。）

ですが、最初に取得するgetPostSuccessとreadMorePostsNextが殆ど同じ処理をしている（違うのはState.postsの内容のみ）ので、重複した記述を書かないで済む方法を探しています。

それぞれ、methodになるのですが、重複して書かない方法があれば、ご教授いただけないでしょうか？

(method) getPostsSuccess(state: WritableDraft<AllPostApi>, { payload }: PayloadAction<PostLoaded>): void
(method) readMorePostsNext(state: WritableDraft<AllPostApi>, { payload }: PayloadAction<PostLoaded>): void

const postSlice = createSlice({
  name: 'postsDisplay',
  initialState,
  reducers: {
    getPostsStart: startLoading,
    getPostsSuccess(state, { payload }: PayloadAction<PostLoaded>) {
      const posts = payload
      state.posts = posts.posts
      state.nextToken = posts.nextToken
      state.isLoading = false
      state.error = null
      console.log('get Post Success')
    },
    getPostsFailure:loadingFailed,
    subscribePost(state, { payload }: PayloadAction<Post>) {
      const post = payload
      state.posts = [post,...state.posts]
      state.isLoading = false
      state.error = null
      console.log('Subscribe')
    },
    readMorePostsNext(state, { payload }: PayloadAction<PostLoaded>) {
      const posts = payload
      state.posts = [...state.posts,...posts.posts]
      state.nextToken = posts.nextToken
      state.isLoading = false
      state.error = null
      console.log('Read More Success')
    }
  }
})

Answer 1

ヘルパー関数作ってあげるのがよいのではないんでしょうか。例えばこんな。

type Mode = 'getPostSuccess' | 'subscribePost' | 'readMorePostsNext'

const resetState = (state_: State, post: Post, mode: Mode): State => {
  let state = {...state_}
  if(mode === 'getPostSuccess'){
    state.posts = post.posts
    state.nextToken = post.nextToken
  }else if(mode === 'subscribePost'){
    state.posts = [post.posts,...state.posts]
  }else{
    state.posts = [...state.posts,...posts.posts]
    state.nextToken = post.nextToken
  }
  state.isLoading = false
  state.error = null
  
  return state
}

いくらかマシになるかもしれません。

あとは非同期を扱うこんな API がドキュメントにありました。
createAsyncThunk | Redux Toolkit
参考までに。