Migrate from Redux to Redux RTK
[[_TOC_]] :notepad_spiral: _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. ## Resources ### [udemy course migrating to RTK](https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/25600192#overview) ### https://redux.js.org/usage/writing-tests#unit-testing-individual-functions ## Tasks Reducers to update : - [x] challenge !902 - [x] chart !897 - [x] global !931 - [x] modal !876 - [x] profile !966 - [x] profileEcogesture !967 - [x] profileType !906 Deprecated message : - [x] `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 Other : - [x] **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 Once all reducers are slices, we can probably - [~] refactor `AppActionsTypes` - [x] Add action creators to redux extensions to quick dispactch actions in app [example here](https://github.com/zalmoxisus/redux-devtools-extension/commit/477e69d8649dfcdc9bf84dd45605dab7d9775c03) !914 ## Example <details><summary>Example</summary> Vanilla Redux : ![image](/uploads/124a05bc91bfdd164188074aa44b0511/image.png) Redux RTK : ![image](/uploads/8eb41da388c74ce47cad49e8a755c49e/image.png) </details> ## Merge request template name Use a similar name adjusting the context : **refactor(redux-rtk):** modal
issue