RTK Notes

RTK_Notes.md

Based on:

• https://redux-toolkit.js.org/tutorials/quick-start
• https://github.com/reduxjs/cra-template-redux/blob/master/template/src/features/counter/

RTK Setup

• If you already have an App, only add the two important dependencies
  • yarn add "@reduxjs/toolkit react-redux
    • see https://github.com/reduxjs/cra-template-redux/blob/master/template.json
• If you don't have an App, create new app with CRA w/ cra-template-redux
• Add store.
  • https://github.com/reduxjs/cra-template-redux/blob/template/src/app/store.js
• Add store provider to <App> component.

Using RTK: add data points

Each time, you want to add a new data point or CRUD operation, do these steps:

1. Add service
   • e.g. https://github.com/reduxjs/cra-template-redux/blob/master/template/src/features/counter/counterAPI.js
2. Add slice
   • e.g. https://github.com/reduxjs/cra-template-redux/blob/master/template/src/features/counter/counterSlice.js
   • NOTE: slices are reducers
3. Add thunk to wrap service
4. Add the new thunk to slice via extraReducers.
   • See: What is difference between reducers and extrareducers in redux toolkit?
5. Add slices/reducers to store
   • https://github.com/reduxjs/cra-template-redux/blob/master/template/src/app/store.js

Using RTK: use data points

See: https://redux-toolkit.js.org/tutorials/quick-start#use-redux-state-and-actions-in-react-components

• Read: useSelector(mySelector)
  • mySelector is a selector function defined near (NOT in!) your slice
• Write: const dispatch = useDispatch(); ... dispatch(myAction());
  • myAction is either a thunk, returned by createAsyncThunk or
    • any of your slice's reducers

Using RTK - Advanced

• Entities - https://redux-toolkit.js.org/api/createEntityAdapter
  • Caching
  • Indexing
• Real-time events
• Add immer - https://redux-toolkit.js.org/usage/immer-reducers
  • Goals:
    • automatically propagate deep state updates
    • protect state from accidental modification by automatically freezing it