Как можно изменить состояние в Redux?

Состояние в Redux можно изменить только через отправку (dispatch) actions. Actions — это простые объекты JavaScript, описывающие, что произошло. Reducers — чистые функции, которые принимают текущее состояние и action, и возвращают новое состояние.

Процесс изменения состояния:

1. Создание Action: Определяется объект action с типом (поле type) и необязательными данными (payload).

   // Пример action для изменения значения
   {
     type: 'SET_VALUE',
     payload: 10
   }
   

2. Отправка Action: Используется метод dispatch из Redux store для отправки action.

   // Получение store (в реальном приложении store обычно доступен через контекст или хуки)
   const store = ...;
   
   // Отправка action
   store.dispatch({ type: 'SET_VALUE', payload: 10 });
   

3. Обработка Action в Reducer: Reducer получает текущее состояние и отправленный action. В зависимости от type action, reducer вычисляет и возвращает новое состояние. Важно, что reducer должен быть чистой функцией: он не должен мутировать существующее состояние, а всегда возвращать новый объект состояния.

   // Пример reducer
   function myReducer(state = { value: 0 }, action) {
     switch (action.type) {
       case 'SET_VALUE':
         // Возвращаем новое состояние, не мутируя старое
         return { ...state, value: action.payload };
       default:
         // Возвращаем текущее состояние по умолчанию
         return state;
     }
   }
   

Альтернативные подходы (с использованием Redux Toolkit):

• создание actions и reducers с помощью createSlice: Redux Toolkit значительно упрощает процесс, автоматически создавая action-создателей и处理器 reducers на основе определенных "срезов" состояния.

  // Пример с createSlice
  import { createSlice } from '@reduxjs/toolkit';
  
  const mySlice = createSlice({
    name: 'myState',
    initialState: { value: 0 },
    reducers: {
      setValue: (state, action) => {
        // Immer позволяет мутировать состояние напрямую, но под капотом создается новый объект
        state.value = action.payload;
      }
    }
  });
  
  export const { setValue } = mySlice.actions;
  export default mySlice.reducer;
  
  // Отправка action, созданного из slice
  store.dispatch(setValue(20));
  

Важно помнить: прямое изменение состояния Redux (например, store.getState().value = 10) строго запрещено и приведет к непредсказуемому поведению. Всегда используйте dispatch actions.