Как здать тим для state в redux?

Для передачи состояния в redux используется понятие "типы действий" (action types) и "редюсеры" (reducers). Ниже я опишу подробно каждый шаг для передачи состояния через типы и редьюсеры.

1. Определите типы действий (action types).
Action types - это константы, которые определяют типы действий, которые могут быть выполнены в вашем приложении. Они позволяют вам легко идентифицировать, какое действие было выполнено. В TypeScript, это обычно определяется как перечисление (enum).

Пример:

enum ActionTypes {
  SET_NAME = 'SET_NAME',
  SET_AGE = 'SET_AGE',
}

В этом примере определены два типа действий: SET_NAME и SET_AGE.

2. Создайте действия (actions).
Действия (actions) представляют собой объекты, которые содержат тип действия и данные, которые передаются в редьюсеры (reducers). Каждое действие должно иметь уникальный тип и необходимые данные.

Пример:

interface SetNameAction {
  type: ActionTypes.SET_NAME;
  payload: string;
}

interface SetAgeAction {
  type: ActionTypes.SET_AGE;
  payload: number;
}

В этом примере определены два действия: SetNameAction, которое содержит строковое значение имени, и SetAgeAction, которое содержит числовое значение возраста.

3. Создайте редьюсер (reducer).
Редьюсеры (reducers) - это функции, которые принимают текущее состояние (state) и действие (action) и возвращают новое состояние. Они определяют, как изменения состояния должны быть выполнены в ответ на действия.

Пример:

interface AppState {
  name: string;
  age: number;
}

const initialState: AppState = {
  name: '',
  age: 0,
}

const reducer = (state = initialState, action: SetNameAction | SetAgeAction): AppState => {
  switch (action.type) {
    case ActionTypes.SET_NAME:
      return { ...state, name: action.payload };
    case ActionTypes.SET_AGE:
      return { ...state, age: action.payload };
    default:
      return state;
  }
}

В этом примере определен редюсер, который принимает текущее состояние (state) и действие (action) и возвращает новое состояние. В зависимости от типа действия, он изменяет соответствующее поле состояния.

4. Создайте хранилище (store).
Хранилище (store) - это объект, который содержит текущее состояние вашего приложения. Оно создается с использованием функции createStore из пакета redux и принимает редьюсер.

Пример:

import { createStore } from 'redux';

const store = createStore(reducer);

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

5. Используйте хранилище в вашем приложении.
Теперь, когда хранилище создано, вы можете использовать его в вашем приложении для доступа к текущему состоянию и выполнения действий.

Пример:

import { useDispatch, useSelector } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();
  const name = useSelector((state: AppState) => state.name);
  const age = useSelector((state: AppState) => state.age);

  const handleSetName = (name: string) => {
    dispatch({ type: ActionTypes.SET_NAME, payload: name });
  }

  const handleSetAge = (age: number) => {
    dispatch({ type: ActionTypes.SET_AGE, payload: age });
  }

  return (
    <div>
      <input type="text" value={name} onChange={(e) => handleSetName(e.target.value)} />
      <input type="number" value={age} onChange={(e) => handleSetAge(parseInt(e.target.value))} />
    </div>
  );
}

В этом примере используется хук useSelector для получения текущего состояния из хранилища и useDispatch для вызова действий. В компоненте App определены два обработчика событий, которые вызывают действия для изменения состояния.

Теперь вы знаете, как передавать состояние с помощью типов и редьюсеров в Redux! Это позволяет удобно управлять состоянием вашего приложения и упрощает отслеживание изменений.