Если в action нет асинхронных запросов нужно ли использовать middleware?

Question

[qfrontend]

Приветствую) Нужно ли использовать middleware, если в action нет асинхронных запросов..., но нужно сделать какие то вычисления например, или ещё что нибудь...? Или middleware нужен только для асинхронных действий?
1)Писать так?

const action = (a, b, c) => {
  return dispatch => {
    const result = (a,b,c) => a + b + c;

    dispatch(dispatchResult(result))
  }
};

const dispatchResult = (result) => {
  return {
    type: ACTION_TYPE,
    payload: {
      result: result
    }
  };
}

2) Или так?

const action = (a, b, c, d) => {
  const result = (a,b,c) => a + b + c;

  return {
    type: ACTION_TYPE,
    payload: {
      result: result
    }
  };
};

Как правильно?
Спасибо)

Answer 1

[Timur Kostenko]

Для асинхронных экшенов используй middleware redux-thunk, с помощью него можешь писать подобного рода код:

const fetchData = () => {
  return async (dispatch) => {
    // start fetching
    dispatch({type: FETCH_DATA_START});
    try {
      const {data} = await api.fetch('/data');
      dispatch({type: FETCH_DATA_SUCCESS, data});
    } catch (err) {
      dispatch({type: FETCH_DATA_ERROR, error: err});
    }
  }
}

Comments

[qfrontend]

А если action не асинхронный, но нужно сделать какие то манипуляции? Тогда как во 2 варианте?

[Timur Kostenko]

qfrontend, в таком случае можно создать отдельную функцию и передавать в dispatch

const action = (payload) => {
  return {
    type: ACTION_TYPE,
    payload,
  };
};
// inside component
const getSummarize = ({a, b, c}) => a + b + c;
dispatch(action(getSummarize(payload)));

Answer 2

[Islam Ibakaev]

посчитай прямо в компоненте

import { sum } from 'lodash'
...
// где-то в методе какого-то компонента
this.props.action(sum([a, b, c]))
...
const action = payload => ({
    type: ACTION_TYPE,
    payload
});