Как правильно вызвать action в redux?

@jakayla 

В Redux, вызов action осуществляется путем вызова функции, которая называется "action creator". Эта функция создает объект действия, который затем отправляется в Redux store через функцию "dispatch".

Пример вызова action creator:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// определение action creator
function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

// вызов action creator
dispatch(addTodo('Купить молоко'));

В этом примере "addTodo" является функцией-создателем действия, которая возвращает объект действия с типом "ADD_TODO" и свойством "text", которое содержит переданный текст.

Вызов "dispatch(addTodo('Купить молоко'))" отправляет этот объект действия в Redux store, где он будет обработан редьюсером и изменит состояние приложения.

@jakayla 

Важно отметить, что вызов action creator необходимо совершать внутри компонентов React, связанных с Redux store. Для этого можно использовать функцию "connect" из библиотеки react-redux, чтобы связать компонент с Redux store и передать action creator как пропс в компонент.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions';

class TodoForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }

  handleChange = (e) => {
    this.setState({ text: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.dispatch(addTodo(this.state.text));
    this.setState({ text: '' });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.text} onChange={this.handleChange} />
        <button type="submit">Добавить задачу</button>
      </form>
    );
  }
}

export default connect()(TodoForm);

В этом примере, компонент TodoForm связан с Redux store с помощью функции connect(). При отправке формы, вызывается метод handleSubmit, который вызывает action creator addTodo и передает введенный текст задачи в качестве аргумента. Этот action затем отправляется в Redux store с помощью функции dispatch, которая доступна благодаря функции connect().