Actions.md

Actions

If you don't know what actions are you can read the Redux's documentation.

There are two kinds of actions, synchronous and asynchronous:

** Semicolons ";" are not actually needed, but syntax highlighting doesn't know about that ¬¬*

Synchronous

Vanilla action:

const LOGIN = 'redux-boot/user/LOGIN';

const loginAction = (...args) => ({ type: LOGIN, payload: ...args })

Using Redux-actions:

import {createAction} from 'redux-actions';

const LOGIN = 'redux-boot/user/LOGIN';

const loginAction = createAction(LOGIN)

Asynchronous

Vanilla action:

const LOGIN = 'redux-boot/user/LOGIN';

const loginAction = async (...args) => {
  
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve({...args}), 1)
  })
  
  return { type: LOGIN, payload: result }
}

Using Redux-actions:

import {createAction} from 'redux-actions';

const LOGIN = 'redux-boot/user/LOGIN';

const loginAction = createAction(LOGIN, async (...args) => {

  const result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve(...args), 1)
  })
  
  return result
})

Dispatching asynchronous action give us a promise which will be resolved when the action life cycle is done.

store.dispatch(loginAction(credentials)).then((user) => {
  console.log(user)
})