Action and an Action Creator in Redux.js?

Action Type

export const Actions = {  GET_USER_DETAILS_REQUEST: 'GET_USER_DETAILS_REQUEST',  GET_USER_DETAILS_SUCCESS: 'GET_USER_DETAILS_SUCCESS',  GET_USER_DETAILS_FAILURE: 'GET_USER_DETAILS_FAILURE',  UPDATE_USER_DETAILS_REQUEST: 'UPDATE_USER_DETAILS_REQUEST',  UPDATE_USER_DETAILS_SUCCESS: 'UPDATE_USER_DETAILS_SUCCESS',  UPDATE_USER_DETAILS_FAILURE: 'UPDATE_USER_DETAILS_FAILURE',  // more...
};

Action

(The question marks mean the property is optional. So you only need the type property at a minimum).

An action to fetch the user named Dan might look something like this

{    
type: 'GET_USER_DETAILS_REQUEST',
payload: 'Dan'
}

But you don’t typically hardcode an action like this. You’d use an action creator.

Action Creator

Simple action creators look like this:

(Note: If you’re concerned about too much ‘boilerplate’ then redux-actions will help you greatly reduce it).

When writing basic Redux, an action creator simply returns an action. You would typically dispatch the action to your store immediately.

store.dispatch(getUserDetailsRequest('Dan'));

Although, realistically, you’ll be doing this via dispatch properties that are passed into a React component like this:

Later on, you’ll have to deal with asynchronous actions such as making an AJAX call to the server. If you choose to use redux-thunk to manage your asynchronous code then you’ll have complex action creators that dispatch multiple actions directly to the store rather than returning a single action for you to dispatch.

Personally, I prefer redux-saga over redux-thunk. With redux-saga, your action creators stay simple.

Further Reading

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store