Redux: редьюсеры и селекторы

В Redux, редьюсеры и селекторы играют важную роль в управлении состоянием приложения. Редьюсеры отвечают за обновление состояния приложения в ответ на действия, а селекторы позволяют извлекать определенные части состояния из хранилища. Давайте рассмотрим их реализацию:

Реализация редьюсеров для обновления состояния:

Пример редьюсера, который обновляет счетчик в зависимости от действия:

// counterReducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

export default counterReducer;

Использование селекторов для извлечения данных из стора:

Пример селектора для получения счетчика из состояния:

// selectors.js
export const selectCount = state => state.counter.count;

Использование редьюсеров и селекторов в React:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions'; // Предполагается, что у вас есть соответствующие действия

const CounterComponent = () => {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

В этом примере useSelector используется для извлечения значения счетчика из состояния, а useDispatch для отправки действий в стор Redux. Таким образом, вы можете обновлять состояние приложения и отображать его в вашем React-компоненте.