What would similar code look like on any action creator?

Question

JavaScript

Help me figure out how action creator's
actions.js work

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;
    }
}

Can be redux-actions or redux-act

Answer 1

You are sending a simple object:

{
  type: 'BLA_BLA'
}

This is your action.
This is

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

your "action creator".
In order for an object with a type (and data, if necessary) to get into the reducer, it must be thrown through a special "pipe" - dispatch (dispatcher).
I.e:

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

Then, the object passed through the "dispatcher" will get into all reducers. In some of the reducers, there will be a "face" command for a certain type (type), in our case, the string 'BLA_BLA', which means:

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

The question was posed incorrectly. Action creators are functions that return action objects ( Actions ) like you have in actions.js
Action is an object with a type property (action type) and an optional payload that is passed to dispatch .
redux-actions and redux-act are boilerplate utilities for generating action creators and reducers. I advise you not to even look in their direction for now (or you can not look at all), better study the naked Redux API well .
I also advise you to spend time getting acquainted with immutable.js
And yet, your code in actions.jswon't work because the loading, success, error functions are used before they are defined.
Or swap so that send is declared below them:

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

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

or use the function keyword for them :

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

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

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

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

And here you can read about the difference between Function Declaration and Function Expression .

Answer 3

As the documentation itself says, action creators are functions that create actions. That is, it is a function that returns an action (object). In your case, action creators, this loading, success, error
redux-actionsand redux-actthis are already auxiliary libraries, as a more concise approach.