extraReducers

Question 1

extraReducers

Answer 1

Ссылка: https://redux-toolkit.js.org/api/createslice#extrareducers

1. Мы дисапчим экшн и его можно отработать в одном и другом slice
2. Когда работаем с санками

Redux может потребоваться обновить собственное состояние в ответ на типы действий, которые были определены в других частях приложения (например, при отправке действия «выход пользователя из системы» очищаются различные типы данных). Это могут быть типы действий, определенные другим createSlice вызовом, действия, сгенерированные createAsyncThunk, сопоставлением конечных точек RTK Query, или любое другое действие. Кроме того, одна из ключевых концепций Redux заключается в том, что многие срезы-редукторы могут независимо реагировать на один и тот же тип действия.

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

При создании тудулиста добавляется тудулист в массив в todolistsSlice, но еще нужно добавлять пустой массив тасок для созданного тудулиста. Т.е. нужно в tasksSlice обработать case, созданный в todolistsSlice. Сделать это в reducers нельзя, потому что в todolistsSlice имя экшена будет todolists/addTodolist, а в tasksSlice - tasks/addTodolist.

Для решения проблемы используйте свойство slice extraReducers, которое используется для обработки actions из внешних слайсов или асинхронных операций createAsyncThunk. extraReducers используется с ‘builder callback’ notation, как и createReducer.

extraReducers можно использовать, лишь в том случае, когда функция будет вызываться два раза
extraReducers: (builder) => {
builder.addCase(createTodolistAC, (state, action) => {
state[action.payload.id] = []
})
addCase(deleteTodolistAC, (state, action) => {
delete state[action.payload.id]
})
}

Можно больше не использовать AC

Создание санки:
export const fetchtodolistsTC = createAsyncThunk(${todolistsSlice.name}/fetchtodolistsTC,
async (_arg, thunkAPI) => {
const {rejectWithValue} =thunkAPI
try {
// async logic
const res = await todolistsApi.getTodolists()
return {todolists: res.data}
} catch (e) {
return rejectWithValue(e)
}
})

Создание extraReducer
extraReducers: (builder) => {
builder
.addCase(fetchtodolistsTC.fulfilled, (_state, action) => {
return action.payload.todolists.map((todolist) => ({…todolist, filter: ‘all’}))
})
.addCase(fetchtodolistsTC.rejected, (_state, action) => {

  })   }