Как обновить компонент при изменении state?

Question

[Антон]

Имеется компонент

function Tasks(tasksData) {
    return (
        <React.Fragment>
            tasksData.map((task) => (
                <Task
                    key={task.ID}
                    task={task}
                />)
            )
        </React.Fragment>
    )
}

Далее в компоненте выполняются всякие действия и после данная task, которая передана внутрь компонента, удаляется из state, т.е. если ранее было state.tasksData[task0, task2, ..., task10], то после стало state.tasksData[task0, task2, ..., task9].
И вот в чем вопрос, в Redux DevTools я вижу, что необходимые действия прошли, и нужного task у нас из state удален, но, компонент Tasks, так и отображает Task, которой в state уже нет.
Как сделать так, чтобы при удалении task из state, страница ре-рендерилась с новым state?

Comments

[Дмитрий]

Для начала показать код удаления данных, без кода непонятно

[Дмитрий]

И React.Fragment здесь лишнее, вы можете просто вернуть результаты map

return tasksData.map(t => (<Task key={t.ID} task={t} />))

[Антон]

Дмитрий, примерно так, внутри компонента Task есть кнопка, при onClick вызывается вот такая функция:

const sendTask = (task) => () => {
    sendTaskRequest(task); // Это redux-action - отправляет данные на сервер в middleware
    delTaskStateRequest(task.ID) // Это тоже redux-action - данные обрабатываются в reducer'е
}

Так выглядит redux-reducer:

[delTaskStateRequest.toString()]: (state, { payload }) => {
    if (Array.isArray(state.tasksData)) {
        state.tasksData.map((task) => {
            const id = payload.ID;
            if (task.ID === id) {
                state.tasksData.splice(task, 1);
                return state.tasksData;
             }
         }
     }
}

Все работает. Все удаляется. Но вот после удаления и обновления state, не перерендеривается компонент.

[Антон]

Дмитрий, да не, он не лишний. На самом деле компонент Tasks фрагмент более масштабного компонента.

Answer 1

[Дмитрий]

Первое правило Redux - всегда спредить изменяемую величину, иначе редакс не знает, что вы ее поменяли. Используемый вами метод splice не меняет массив, да и map в данном случае бессмысленен. Верный код будет таким:

const index = state.tasksData.findIndex(({ ID }) => ID === payload.ID)
if (index > -1) return {
  ...state,
  tasksData: 
    state.tasksData.slice(0, index).concat(
      state.tasksData.slice(index + 1))
}

Comments

[Антон]

Такой метод не работает. Ошибка:

TypeError: state.infoTask.slice(...).concut is not a function
(anonymous function)
C:/.../PM2/src/ducks/routing-tasks/reducers.js:149
146 |
147 | [delTaskRequest.toString()]: (state, { payload }) => {
148 | const index = state.infoTask.findIndex(({ ID }) => ID === payload.ID)
> 149 | if (index > -1) state.infoTask =
150 | state.infoTask.slice(0, index).concut(
151 | state.infoTask.slice(index + 1))
152 | return state;

[Антон]

Первое правило Redux - всегда спредить изменяемую величину, иначе редакс не знает, что вы ее поменяли. Используемый вами метод splice не меняет массив, да и map в данном случае бессмысленен.

Почему редакс не знает что массив изменился, если в редакс девтулс я вижу что он изменился?
Насчет map, я такой способ использую еще в куче редьюсеров и во всех все хорошо работает - данные изменяются, компонент рендерится.
Загвоздка только с вышеописанным компонентом. Из-за того, что он не меняется, а полностью удаляется, видимо.

[Дмитрий]

Антон, concat вместо concut

[Дмитрий]

Антон,

"Почему редакс не знает что массив изменился, если в редакс девтулс я вижу что он изменился?"

Вы видите измененные поля, ссылка осталась той же. Необходимо поменять ссылку одним из методов, который создает новый массив.

[Дмитрий]

Антон,

"Насчет map, я такой способ использую еще в куче редьюсеров и во всех все хорошо работает"

Назначение map - получить новый массив на основании значений предыдущего. Вы никак возвращаемое значение не используете, значит память на него расходуется бес толку. Можно было бы применить forEach, но тоже не идеально, поскольку вам нужно найти всего один элемент. Допустим у вас 2000 элементов в массиве, а искомый элемент стоит первым. Получается что еще 1999 итераций за ним будут бессмысленны, а прервать выполнение вы не можете. Поэтому в данном случае лучше подойдет findIndex, он находит нужный индекс и прекращает итерацию.

[Антон]

Дмитрий, reducer так работает. Но компонент так и не ре-рендерится. :(

[Дмитрий]

Антон, попробуйте последний вариант

[Антон]

Дмитрий, какой

последний вариант

?
Дмитрий, еще вопрос: есть у меня еще два редьюсера, они обновляют state и если делать вот так:

[getTasksDataSuccess.toString()]: (_state, action) => action.payload

то все работает и компонент обновляется, а есть у меня другой редюсер:

[getTaskDataSuccess.toString()]: (state, action) => {
    state.infoTasks.push(action.payload.infoTasks[0];
    return state;
}

Он добавляет в state.infoTasks одни элемент, но таким способом, ре-рендер не происходит.

Тут в чем дело?

[Антон]

Дмитрий, объясните, пожалуйста, как правильно удалить/добавить элементы массива который хранится в state, чтобы все компоненты, которые содержат изменившиеся данные, рендерились заново?
Буду очень благодарен. :)

[Дмитрий]

Антон, сам state Тоже должен спредиться. Последний вариант - я поменял свой ответ, там делается спред состояния

const index = state.tasksData.findIndex(({ ID }) => ID === payload.ID)
if (index > -1) return {
  ...state,
  tasksData: 
    state.tasksData.slice(0, index).concat(
      state.tasksData.slice(index + 1))
}

То же самое сделайте и в вашем необновляющемся редюсере

[getTaskDataSuccess.toString()]: (state, action) => {
    // Вместо этого кода
    // state.infoTasks.push(action.payload.infoTasks[0];

    // пишем этот
    return {
        ...state;
        infoTasks: [
            ...state.infoTasks, 
            action.payload.infoTasks[0]
        ]
    }
}

[Yustas Alexu]

Антон, в Реакте для удаления элемента массива обычно используют функциональный подход с использованием filter. Но проблема там не в редьюсере скорее всего, если вы говорите что в Redux все удалилось. В вашем коде я вижу, что функция Tasks это не компонент. Компоненты Реакт должны принимать параметры в виде props, а у вас там один массив передается как параметр.

[Yustas Alexu]

Антон, покажите как вы используете функцию Tasks. Судя по тому как она выглядит, вы ее просто вызываете как функцию.

[Антон]

Дмитрий, так вроде работает, т. е. компоненты рендарятся, все хорошо. За это спасибо, все объяснили. :)

[Антон]

Yustas Alexu, нет, как функцию я ее не вызываю. Только как компонент, т. е. .