refactor: redux store

[Schwehn42]

Description

Since the major update of Redux to 2.x, the former store didn't quite work anymore with TS. Thus, it had to be refactored to the latest standards.

Key Features:

New directory layout:

store.ts
features/
├── featureA/
│   ├── actions.ts
│   ├── reducer.ts
│   ├── thunks.ts
│   └── types.ts
└── featureB/
    ├── actions.ts
    ├── reducer.ts
    ├── thunks.ts
    └── types.ts

For this, git mv was so all files retain their git history.

Actions

Actions are created using thecreateAction function, for example:

export const createdParticipant = createAction<Participant>("participants/createdParticipant");

Reducers

Reducers are created using createReducer, and use the builder pattern to switch between the different cases.
I didn't opt for using slices because some thunks are used in the reducer as well, so we needed extraReducers using builder anyways.

Thunks

Formerly called "middleware", we now use thunks for actions which require side effects (like async API calls). The "Toast to retry"-mechanic has been abstracted:

export const createColumn = createAsyncThunk<void, ColumnWithoutId, {state: ApplicationState}>("columns/createColumn", async (payload, {dispatch, getState}) => {
  const boardId = getState().board.data!.id;
  await retryable(
    () => API.createColumn(boardId, payload), // async call
    dispatch, // dispatch function
    () => createColumn({...payload}), // action to be retried (itself in most cases)
    "createColumn" // error key, from i18n
  );
});

The above function can be dispatched like any other action.

Store

• The ApplicationState type is now inferred by the store
• The hook useAppDispatch is now also exported from the store

Changelog

• Adjust actions, reducers, and async actions (thunks) to use the provided functions by redux-toolkit.
  • I tried my best for the logic to stay the same, maybe at one or two places I had to change it
• Adjust all imports
• use useAppDispatch from store
• Adjust tests, make linter happy along the way
• Add store.md explaining how the store in further detail and how to use it.

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

[laila-rin]

LGMT, just a one or two questions that are more for clarification.

[github-actions]

The deployment to the dev cluster was successful. You can find the deployment here: https://4485.development.scrumlr.fra.ics.inovex.io
This deployment is only for testing purposes and will be deleted after 1 week.
To redeploy rerun the workflow.
DO NOT STORE IMPORTANT DATA ON THIS DEPLOYMENT

Deployed Images

• ghcr.io/inovex/scrumlr.io/scrumlr-frontend:sha-93516f2

• ghcr.io/inovex/scrumlr.io/scrumlr-server:sha-93516f2