Как передать валью через диспатч?

В React существует несколько способов передачи значения через диспетч (dispatch) в действия (actions) или в хранилище (store). Вариант, который чаще всего используется, - это передача значения через параметры функции в действия.

  1. Создайте функцию действия, которая будет принимать параметр для передачи значения:
// actions.js
export const setValue = (value) => {
  return {
    type: 'SET_VALUE',
    payload: value
  }
}
  1. Импортируйте функцию действия в компонент, где нужно использовать диспетч:
import { setValue } from './actions'
  1. Свяжите функцию действия с компонентом, используя connect:
import { connect } from 'react-redux'

...

export default connect(null, { setValue })(YourComponent)
  1. В компоненте вызовите функцию действия с передачей значения через параметры функции:
this.props.setValue('some value')
  1. Значение будет передано в функцию действия, которая будет вызвана диспетчем и передана к хранилищу.

Второй способ передачи значения через диспетч - это использование middleware (промежуточного программного обеспечения) Redux, такого как Redux Thunk или Redux Saga. С использованием middleware вы можете выполнить асинхронные операции, получить данные с сервера и передать их в действия через диспетч.

Например, с использованием Redux Thunk и асинхронного вызова API:

  1. Установите Redux Thunk:
npm install redux-thunk
  1. Создайте асинхронную функцию, которая будет вызывать ваш API и передавать результат в функцию действия:
// actions.js
export const fetchData = () => {
  return (dispatch) => {
    // Асинхронный вызов API или запрос данных с сервера
    YourAPI.getData().then((data) => {
      // Передача данных в функцию действия с использованием диспетча
      dispatch({ type: 'FETCH_DATA', payload: data })
    })
  }
}
  1. Используйте функцию действия в компоненте, как и раньше:
import { connect } from 'react-redux'
import { fetchData } from './actions'

...

export default connect(null, { fetchData })(YourComponent)
  1. В компоненте вызовите функцию действия:
this.props.fetchData()
  1. Вызов функции действия будет проходить через промежуточное программное обеспечение Redux Thunk, которое выполнит асинхронный вызов API и передаст результат в функцию действия через диспетч.