Skip to content

Migrate from Redux to Redux RTK

🗒 This will be an incremental update, we don't have to update all our code all at once.

No milestone needed

Context

Redux is a library that helps manage the global state of your application. Although it's extremely reliable, it's been criticized in the past for creating overly verbose code with a lot of boilerplate. In recent years, the maintainers of Redux have come out with a new library called Redux Toolkit (RTK) that addresses most, if not all, of the common complaints. My favorite highlight is that RTK generates action creators for you, allowing the removal of A TON of boilerplate.

more on this article : https://shopify.engineering/react-redux-toolkit-migration

Benefits:

  • no more actions -> less code and less files
  • mutable syntax
  • easier onboarding
  • cleaner debugging with scoped actions ex: modal/openFeedbackModal

This issue is the continuation of !841 (merged).

Resources

udemy course migrating to RTK

https://redux.js.org/usage/writing-tests#unit-testing-individual-functions

Tasks

Reducers to update :

Deprecated message :

  • createStore is deprecated. We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore. This should allow us to remove AppActionsTypes. This should also allow us to disable dev tools in prod builds -> !969 (merged)

Other :

  • Typed hooks While it's possible to import the RootState and AppDispatch types into each component, it's better to create typed versions of the useDispatch and useSelector hooks for usage in your application. !943 (merged)

Once all reducers are slices, we can probably

  • refactor AppActionsTypes

  • Add action creators to redux extensions to quick dispactch actions in app example here !914 (merged)

Example

Example Vanilla Redux :

image

Redux RTK :

image

Merge request template name

Use a similar name adjusting the context : refactor(redux-rtk): modal

Edited by Bastien DUMONT