Redux Actions

RapidAdminReact® has a complete boilerplate set for you to work with Redux. Let's have a look at how you can work with actions.

Defining action types

Defining action types in a single file minimizes the possiblity of occurance of a bug due to wrongly types action types. This is how you can create action types in RapidAdminReact®. You can define action types in src/store/actiontypes.js This is how you would define an action type.

// Calendar Actions
export const ADD_EVENT_OPEN = 'ADD_EVENT_OPEN';
export const ADD_EVENT_CLOSE = 'ADD_EVENT_CLOSE';

Creating action creators

Action creators are functions that trigger an action type alomng with an additional payload that needs to be sent to an action. All your action creators can be created inside src/store/actions directory. This is how you would create an action creator.

import * as actionTypes from '../../../actionTypes'

export function addEventOpen ()
{
	return {
		type : actionTypes.ADD_EVENT_OPEN ,
	}
}

export function addEventClose ()
{
	return ( {
		type : actionTypes.ADD_EVENT_CLOSE ,
	} )
}

Benefits:

  • We use the previously created action types to trigger an action in the action creator.
  • All the actions which relate to a common reducer can be created inside the action same file. so your code is organised
  • If you ever need to add an additional payload to an action or change an action, it can be done at a single source of truth.

Using named exports for all actions

You can define named exports in src/stors/actions/index.js file so that all the actions are available at a single source to be imported as a named export inside your files. This is how it can be done in index.js file.

// Calendar Actions
export * from './calendarActions/addEventActions';

Once done all your actions would be available as a named export and you would be able to import your actions in any file from a single namespace like this.

// You can import actions like this once you export them from index.js file 
import {addEventClose} from '../../store/actions';

// Instead of doing this 
import {addEventClose} from '../../store/actions/calendarActions/addEventActions';

Redux Setup
Adding Reducers