Adding Reducers

RapidAdminReact® makes it easy for you to add multiple reducers and yet keep them organised in separate modules.

Step1: Adding a new reducer

To add a new reducer create a new file in the reducers directory. Let us take an example of a reducer that you want to create to set the state of the compose modal for email. You can name your file as EmailComposeReducer.js. Here is a boilerplate code for the file.

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

const initialState = {
	open : false ,
};

const addEventReducer = ( state = initialState , action ) =>
{
	switch ( action.type )
	{
		case actionTypes.ADD_EVENT_OPEN:
			return {
				open : true
			};
		case actionTypes.ADD_EVENT_CLOSE:
			return {
				open : false
			};
		default:
			return state
	}
};

export default addEventReducer;

Step2: Register your reducer with the root reducer

Once you have created a reducer you would need to add it to root reducer so that it is added to the store by RapidAdminReact®. The root reducer file is located at src/store/reducers.js and this is how you would register your reducer with the the root reducer so that it starts listening for all the actions.

import { combineReducers } from "redux";

import addEventReducer from "./reducers/rapidAdminReducers/calendarReducers/addEventReducer";

const reducers = combineReducers ( {
	AddCalEventState : addEventReducer ,
} );

export default reducers;

Key Points

All the additional reducers can be imported to the same file and added to the same reducers object.

Considering the above example addEventReducer will now be available in your component as AddCalEventState and you can use redux hook useSeletor() for the same.

Getting Started

Customization

Routing

Sidebar Setup

Redux