Modernizing Redux Logic with Redux Toolkit (Integrate Redux Toolkit and optimize store configuration)

[Abishekcs]

Redux Toolkit Integration

What this PR does

This PR updates Redux store configuration to use Redux Toolkit, simplifying setup and leveraging built-in optimizations.

Changes

• Replace createStore with configureStore from Redux Toolkit
• Remove explicit thunk middleware import (now included by default)
• Simplify middleware configuration
• Add conditional Redux DevTools enablement
• Remove manual compose enhancers setup

Open questions and concerns

For now, I have simply replaced createStore with configureStore. This follows the suggestion from the Redux migration guide on the official Redux website, which states:

"You should always start by replacing the legacy createStore call with configureStore. This is a one-time step, and all of the existing reducers and middleware will continue to work as-is. configureStore includes development-mode checks for common mistakes like accidental mutations and non-serializable values, so having those in place will help identify any areas of the codebase where those mistakes are happening."

For more details, refer to the Redux documentation: https://redux.js.org/usage/migrating-to-modern-redux#modernizing-redux-logic-with-redux-toolkit

a) Immutable and Serializable Checks

I have currently set immutableCheck and serializableCheck (provided by Redux Toolkit) to false. This decision was made because state mutations and non-serializable values were detected in our existing code, as shown in the screenshots below:

I chose this approach for the following reasons:

1. It allows us to complete the migration to Redux Toolkit without immediately addressing these issues.
2. With these checks disabled, there are no errors or warnings, and the dashboard functions as intended.
3. The development-mode checks provided by Redux Toolkit are temporarily disabled to prevent disruption to our current workflow.

b) Addressing Mutation and Serialization Issues

An important question to consider is whether we should address these mutation and serialization issues now or in the future, especially given the large number of reducers and actions that need to be checked for state mutations.

For example, we can enable mutation checks when resolving or detecting these issues by setting enableMutationChecks to true. Then, pick an existing slice reducer and its associated actions, and ensure there is no state mutation (RTK will automatically detect it). Replace them with RTK's createSlice. Repeat this process for one reducer at a time. After resolving all the state mutations, we can then permanently re-enable these checks i.e (development-mode checks for common mistakes like accidental mutations and non-serializable values).

c) Redux DevTools in Production

I have also disabled Redux DevTools for production, but I'm not sure if this will be helpful.

Any suggestions regarding these three issues would be greatly appreciated. Thank you.

[ragesoss]

I am not familiar with Redux Toolkit, but it sounds like a good idea to use it and then find and fix the reducers that have state mutations.

[Abishekcs]

I am not familiar with Redux Toolkit, but it sounds like a good idea to use it and then find and fix the reducers that have state mutations.

Great! 😁 I am still going through the official Redux docs and style guide for modern Redux. I will try to fix those two mutations as shown in the screenshot of this PR. I will also try to replace the old reducers and actions with Redux Toolkit's createSlice.