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

@nicola 

Для вызова action в redux нужно использовать функцию dispatch из стора redux. Вот пример правильного вызова action:

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

import { useDispatch } from 'react-redux';
import { myActionCreator } from './actions';

function MyComponent() {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(myActionCreator());
  };

  return (
    Dispatch Action
  );
}

В этом примере мы импортировали функцию useDispatch из пакета react-redux и функцию myActionCreator из файла с action creators. Затем мы создали функцию handleClick, которая вызывает dispatch и передает в него результат вызова action creator. В данном случае пример является функциональным компонентом, но используя useDispatch также можно вызвать action внутри классовых компонентов.

@nicola 

Дополню ответ: правильный вызов action в Redux предполагает создание action creator, который возвращает объект с типом действия и данными. Затем этот action creator передается в dispatch, который отправляет действие в redux store.

Пример action creator:

1
2
3
4
5
6
7

// actions.js
export const myActionCreator = () => {
  return {
    type: 'MY_ACTION_TYPE',
    payload: 'some data'
  };
};

Затем этот action creator вызывается с помощью dispatch в компоненте, как показано в предыдущем примере.

Также важно добавить, что перед использованием функции dispatch необходимо обернуть компонент в Provider и передать ему redux store:

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

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Где store - это объект redux store, созданный с помощью createStore из пакета redux.

1
2
3
4
5
6
7

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Данный пример является базовым шаблоном для работы с Redux в React приложении.