Redux Migrations

When making changes to the frontend applications redux store, developers must create migrations when the shape of the redux state changes. This is incredibly important when adding new state properties that are dependant on data being populated by the backend.

Each migration should be able to stand on its own in its own migration file, and each migration should if possible also provide state data. In the case of a code-table for example, it would be recommended to include any/all new items that would be inserted into the database via flyway.

To create a migration the developer will need to perform the following steps:

1. in the redux store folder create a new migration file in the migrations folder
2. create and export a new migration object

export const ExampleMigration = {
   1: (state: any) => {
      return {
         ...state,
         codeTables: {
            ...state.codeTables,
            example: [
               {
                  name: "EXAMPLE01",
                  shortDescription: "Example 01",
                  longDescription: "Example - 01",
                  displayOrder: 1,
                  isActive: true,
               },
               {
                  name: "EXAMPLE02",
                  shortDescription: "Example 02",
                  longDescription: "Example - 02",
                  displayOrder: 2,
                  isActive: true,
               }
            ],
         },
      };
   },
};

In this example we are returning a new object with a key pair where the key is the version number, and the pair is a function that returns a state object. Its this state that you will need to modify in order to create your migration. In the example the state is being returned with a new property on the codeTables property called: example and in addition to creating the new property we are also populating the new property with an array of new code-table objects 3. add your migration to the redux-persist migration script located in the migrations.ts file in the root of the store folder in the frontend project