Как будет выглядеть аналогичный код на любом action creator?

Question

[zayalexnick]

Помогите разобраться, как работают action creator's

actions.js

import { CALLBACK_SEND, CALLBACK_LOADING, CALLBACK_ERROR, CALLBACK_SUCCESS } from './constants/actionTypes';

export const send = ({ name, phone }) => {
    return async (dispatch) => {
        try
        {
            dispatch(loading());

            const result = await axios.post('/callback', { name, phone });

            dispatch(success());
        }
        catch (e)
        {
            dispatch(error(e));
        }
    }
};

const loading = () => ({
    type: CALLBACK_LOADING
});

const success = () => ({
    type: CALLBACK_SUCCESS
});

const error = (message) => ({
    type: CALLBACK_ERROR,
    message: message
});

reducer.js

import { CALLBACK_SEND, CALLBACK_LOADING, CALLBACK_ERROR, CALLBACK_SUCCESS } from './constants/actionTypes';

const initialState = {
    loading: false,
    status: null,
    message: null
}

export default (state = initialState, action) => {
    switch (action.type)
    {
        case CALLBACK_LOADING:
            return { ...state, loading: true };
        case CALLBACK_SUCCESS:
            return { ...state, status: 'OK' };
        case CALLBACK_ERROR:
            return { ...state, status: 'ERROR', message: action.message };
        default:
            return state;
    }
}

Можно redux-actions или redux-act

Answer 1

[Максим]

Вы отправляете простой объект:

{
  type: 'BLA_BLA'
}

Это ваш action.

Это

function qq() {
  return {
    type: 'BLA_BLA',
  }
}

ваш "создатель действия" (action creator).

Чтобы объект с типом (и данными если нужно), попал в редьюсер, его нужно прокинуть через специальную "трубу" - dispatch (диспетчер).

То есть:

dispatch(qq())
// или
dispatch({
  type: 'BLA_BLA',
})

Затем, пропущенный через "диспетчер" объект, попадет во все редьюсеры. В каком-то из редьюсеров, будет команда "фас" на определенный тип (type), в нашем случае - строка 'BLA_BLA', значит:

export default (state = initialState, action) => {
    switch (action.type)
    {
        case 'BLA_BLA':
            // вот сюда придет javascript компилятор, так как вы попали в нужный кейс
            // ибо выше указано - switch по типу экшена (action.type)
           // ниже вы делаете что вам нужно с вашими данными
          // конкретно в этом кейсе, вы берете все что было в state и изменяете loading на true
            return { ...state, loading: true };
        case CALLBACK_SUCCESS:
            // сюда action с типом 'BLA_BLA' не попал
            return { ...state, status: 'OK' };
        case CALLBACK_ERROR:
           // сюда тоже
            return { ...state, status: 'ERROR', message: action.message };
        default:
          // и сюда
            return state;
    }
}

Answer 2

[Антон Спирин]

Вопрос поставлен некорректно. Action creators - это функции возвращающие объекты действия(Actions) те, что у вас в actions.js
Action это объект со свойством type(типом действия) и опционально полезной нагрузкой, который передается в dispatch.

redux-actions и redux-act это бойлерплейт утилиты для генерации action creators и редьюсеров. Советую пока даже не смотреть в их сторону(а можно и вообще не смотреть), лучше хорошо изучите голый API Redux.
Еще советую потратить время на знакомство с immutable.js

И еще, ваш код в actions.js не будет работать, так как функции loading, success, error используются раньше, чем определены.
Либо поменяйте местами, так чтобы send был объявлен под ними:

const loading = () => ({ ... });
const success = () => ({ ... });
const error = (message) => ({ ... });

export const send = ({ name, phone }) => { ... };

либо используйте для них ключевое слово function:

export const send = ({ name, phone }) => { ... };

function loading() { 
  return { ... };
};

function success() { 
  return { ... };
};

function error(message) { 
  return { ... };
};

А тут можете почитать о разнице между Function Declaration и Function Expression.

Answer 3

[Gleb Qeemerc]

Как говорит сама документация, action creators - это функции, которые создают экшены. То есть, это функция, которая возвращает экшен (объект). В вашем случае action creators, это loading, success, error
redux-actions и redux-act это уже вспомогательные библиотеки, как более лаконичный подход.