Обновление нескольких элементов магазина Redux за один раз

Question

В моем магазине Redux у меня есть массив потоков и массив ответов. Каждый ответ имеет идентификатор потока, чтобы связать его с потоком. При получении потока из базы данных счетчик ответов является одним из возвращаемых свойств, и счет отображается на веб-странице вместе с потоком.

Моя проблема появляется, когда пользователь добавляет новый ответ. API возвращает достаточно информации, чтобы я мог добавить новый ответ в коллекцию ответов. Но я также хочу увеличить свойство количества ответов потока, который находится внутри массива потока. Как бы я это сделал?

Это мои (упрощенные) редукторы:

const thread = (state = {}, action) => {
    let nextState = state

    if (action.type === C.POST_MESSAGE) {
        nextState = action.payload
    }
    return nextState
}

const threads = (state = initialState.threads, action) => {
    let nextState = state

    if (action.type === C.POST_MESSAGE) {
        nextState = [thread(null, action), ...state]
    }
    return nextState
}

const reply = (state = {}, action) => {
    let nextState = state

    if (action.type === C.POST_REPLY) {
        nextState = action.payload
    }
    return nextState
}

const replies = (state = initialState.replies, action) => {
    let nextState = state

    if (action.type === C.POST_REPLY) {
        nextState = [...state, action.payload]
    }
    return nextState
}

Answer 1

В вашем случае вы отправляете действие, когда где-то создается ответ (я полагаю, действие 'POST_REPLY').

Помните, что отправляемое действие доступно в КАЖДОМ редукторе вашего приложения, поэтому, если вы хотите обновить состояние потоков, вам просто нужно ответить на POST_REPLY действие в редукторе темы соответственно.

const threads = (state = initialState.threads, action) => {
  ... // other logic to update the threads list
  if(action.type === 'POST_REPLY') {
    // increment the reply count here and return the new thread list
    // action.payload would be the reply object in this case
  }
  ... // other logic to update the threads list
}

Теперь вы можете обновить конкретную ветку, используя информацию в ответе. Помните, что вы должны возвращать новый объект каждый раз, когда происходит обновление.

const threads = (state = initialState.threads, action) => {
  ... // other logic to update the threads list
  if(action.type === 'POST_REPLY') {
    const reply = action.payload;
    const index = state.findIndex(i => i.id === reply.threadId) // index of the thread in the array 
    const newThread = {...state[index], replies: state[index].replies + 1}
    return [
       ...state.slice(0, index), // copy threads before this index
       newThread, // the updated thread
       ...state.slice(index) // copy threads after this index
    ]

  }
  ... // other logic to update the threads list
}