Adding Redux to a plugin

The root app uses Redux for it's state management, the plugins don't have to as events will be fired via the browser - but it is the recommended tool for a complex application and helps decouple the view from the state.

The tutorials on the Redux site are a good starting point but we will also outline the steps here. You can go through the changes for adding Redux to the parent app at commit 8cb635 and then the changes to add testing to it at commit 4ea12.

Read [insert link here] to understand the data flow model first and the various parts needed for React with Redux

Steps to add Redux

Installation

Install the packages needed:

npm install --save redux redux-thunk redux-logger [email protected] @types/react-redux @types/redux-logger

Types

Create a new state folder in your src folder, make a new types.tsx file and add a type for a new action

export const {{action}}Type = '{{string identifying action}}';

export interface {{action}}Payload {
  {{property}}: {{proprtyType}}
}

where action, string identifying action, property and propertyType need to be defined.

Actions

Add a new actions folder inside the state folder and start building actions:

import { NotificationType, NotificationPayload } from '../daaas.types';
import { ActionType } from '../state.types';

export const daaasNotification = (
  message: string
): ActionType<NotificationPayload> => ({
  type: NotificationType,
  payload: {
    message,
  },
});

The key here is that any action should be of the format { type: {{some string}}, payload: {{some object}} }, following this convention will allow the redux-logger library to output actions to the console as well as making it easier for the redux dev tools to integrate with your actions.