Rdux-toolkit

Question 1

Новые методы Redux-toolkit и зависимости которые идут с коробки

Answer 1

Методы:
1. createActio() - cоздает action;
2. createReducer() - immer
3. createSlice()
4. configureStore()

Зависимости:
immer, redux, redux-thunk, reselect - создавания тех же селектов с определеннымим оптимизациями.

Question 2

Метод createAction()

Answer 2

Старая версия:
сonst addTodo = (title) => {{
type: ‘ADD_TODO’,
payload: title,
}}

Новая аерсия:
createAction - принимает 2 параметра первый тип action второй функция которая оптимизирует payload
const addTodo = createAction(‘ADD_TODO’, (title) => {payload: {title, id: Date.now()}})

Question 3

Метод createReducer()

Answer 3

createReducer - принримает 2 значения масив как initial state, функцию колбэк которая называется builderCallback.
addCase - может добавлять дефолтное значение, и матчеры.

ЕСТЬ ДВА ВАРИАНТА СОЗДАНИЯ Reducers

1. ВАРИАНТ СИНТАКСИСА:
   const todos = createReducer([], (builder) => { builder вставлется redux-toolkit–ом
   builder
   .addCase(addTodo - название action, (state, action) => {
   state.push(action.payload);
   })
   .addCase(addRemove, (state, action) => {})
   .addCase(addToggle, (state, action) => {})
   })
2. ВАРИАНТ СИНТАКСИСА:

const todos = createReducer([], {
[addTodo]: (state, action) => avoid state.push(action.payload),
[addRemove]: (state, action) => state.filter((todo) => todo.id !== id),
[toggleTodo]: (state, action) => …….,

})

Почему мы исползуем push и не делаем return. Под капотом RTK использует библиотеку Immer создает proxy (современный JS объект) - перехватывает события которые мы делаем и дополнительно обеспечивает имутабельность.
Если нам нужно воспользуватся методом filter, map которые возвращают новый масив то мы должны использовать return.

.addCase(addRemove, (state, action) => {
return state.filter((todo) => todo.id !== id)
})

Question 4

Метод CreateSlice

Answer 4

CreateSlice - заменяет работу createAction(), createReducer()
Принимает 4 аргумента (3 обязательных).
1. initialState
2. name - это домен который мы добовляем в тип Action(@@todos/)
3. reducers
4. extraReducers (опциональный) - дополнительные reducer которые мы создавали через createReducer которые не будут попадать в name (2). Редюсер который будет виден глобально для всех сласов. Часто используются по работе с асинхронностью.
FLOW
Создаем слайз затем из этого слайса создаем action

const todoSlice = createSlice({
name: ‘@@todos’,
initialState: [],
reducers: {
addTodo: {
reducer: (state, action) => {},
prepare: (title) => ({
payload: {
title,
id: Date.now()
}
})
},
removeTodo: (state, action) => {},
toggleTodo: (state, action) => {},
}
});

export const {addTodo, removeTodo, toggleTodo} = todoSlice.actions;

export const store = creataeStore(tdoSlice.reducer)

Question 5

метод configureStore()

Answer 5

Теперь мы передаем не параметры как было в createStore а объект:
export const store = configureStore({
reducer: todoSlice.reducer —- обязательнгое поле
reducer: { —- наш комбайн редюсер
todos: todoSlice.reducer,
filter: filter.reducer,
}
devTools: true, —-подключает devTools
})