Создание Slice

Question 1

Slice

Answer 1

createReducer и createAction можно заменить функцией createSlice - функцией из Redux Toolkit, позволяющей объединить логику редюсера и actions в одном месте, что делает код более организованным и читабельным.

Основные преимущества createSlice:
- Автоматически генерирует action types и action creators, что значительно уменьшает количество кода;
- Логика редюсера и actions объединены в одном объекте slice, что делает код модульным и легче поддерживаемым, т. к. все связанные части находятся в одном месте;
- Делает процесс создания редюсеров и actions более интуитивным и менее подверженным ошибкам;
- В сочетании с createAsyncThunk упрощает управление асинхронными операциями, такими как запросы к API, обеспечивая обработку состояний загрузки, успеха и ошибок.

Ссылка: https://redux-toolkit.js.org/api/createSlice
Создание createReducer: https://redux-toolkit.js.org/api/createSlice#createreducer

Пример:
export const appSlice = createSlice({
name: ‘app’,
initialState: {
themeMode: ‘light’ as ThemeMode,
},
// reducers состоит из подредьюсеров, эквивалентных одному оператору case в switch
reducers: create => ({
changeThemeModeAC: create.reducer<{ themeMode: ThemeMode }>((state, action) => {
// логика в подредьюсерах мутабельная, а иммутабельность достигается благодаря immer.js
state.themeMode = action.payload.themeMode
}),
}),
})

// action creator достается из appSlice.actions
export const { changeThemeModeAC } = appSlice.actions
// reducer достается из appSlice.reducer
export const appReducer = appSlice.reducer

При создании Slice, мы используем: имя, стейт и редьюсеры - принимает колбэк функцию. При Slice не используем - combineReducers - переносим в store.
При изменении имен, лучше использовать такую консрукцию
export const store = configureStore({
reducer: {
[tasksSlice.name]: tasksReducer,
[todolistsSlice.name]: todolistsReducer,
[appSlice.name]: appReducer,
},
})