Как правильно изменять состояние redux в react-redux?

@narciso 

Изменение состояния в Redux с помощью React-Redux можно сделать следующим образом:

1. Определите действие (action) в вашем приложении Redux, которое вы хотите выполнить. Действие должно быть объектом с ключом type, который описывает тип действия, и может содержать другие ключи с дополнительными данными.
2. Создайте функцию-генератор действия (action creator), которая возвращает действие. Например:

1

const incrementCounter = () => ({ type: 'INCREMENT_COUNTER' })

1. Определите редуктор (reducer) в вашем приложении Redux, который обрабатывает действия и возвращает новое состояние приложения. Редуктор должен быть функцией, которая принимает текущее состояние и действие, и возвращает новое состояние. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const initialState = { counter: 0 }

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 }
    default:
      return state
  }
}

1. Используйте функцию useDispatch из библиотеки React-Redux, чтобы получить объект диспетчера (dispatcher), который позволяет отправлять действия в хранилище Redux. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { useDispatch } from 'react-redux'

const Counter = () => {
  const dispatch = useDispatch()

  const handleClick = () => {
    dispatch(incrementCounter())
  }

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

1. Используйте функцию useSelector из библиотеки React-Redux, чтобы получить текущее состояние из хранилища Redux. Например:

1
2
3
4
5
6
7

import { useSelector } from 'react-redux'

const Counter = () => {
  const counter = useSelector(state => state.counter)

  // ...
}

Обратите внимание, что использование функций useDispatch и useSelector требует, чтобы ваш компонент был внутри компонента Provider, который был настроен для работы с хранилищем Redux.