[Frontend] Implement Redux Toolkit for global state management

[glenflorendo]

User Story

As a developer, I want to integrate Redux Toolkit into our web application to manage global UI and data states efficiently, improving the overall performance and maintainability of our codebase.

Description

Redux Toolkit provides a set of tools and best practices for managing state in a Redux application. By utilizing Redux Toolkit, we can streamline our state management logic, simplify the implementation of actions and reducers, and enhance the scalability and maintainability of our codebase.

Acceptance Criteria

• Integrate Redux Toolkit into the web application.
• Define reducers for managing global UI and data states.
• Create actions for updating and retrieving state values.
• Utilize Redux Toolkit's createSlice function to define slices of state and their associated reducers.
• Update components to use Redux Toolkit's useSelector and useDispatch hooks for accessing and dispatching actions.
• Ensure that the application's functionality is maintained and that the user experience is not impacted by the integration of Redux Toolkit.

Technical References

• Redux Toolkit Documentation
• Using Redux with React

Design References:

N/A