React Redux In A Nutshell

Get to know the full overview of React Redux, Redux Toolkit and Redux Thunk

Created on Mar 26, 2022

•

120 views

We can create a Redux store using the Redux Toolkit configureStore API
- configureStore accepts a reducer function as a named argument
- configureStore automatically sets up the store with good default settings
Redux logic is typically organized into files called "slices"
- A "slice" contains the reducer logic and actions related to a specific feature/section of the Redux state
- Redux Toolkit's createSlice API generates action creators and action types for each individual reducer function you provide
Redux reducers must follow specific rules
- Should only calculate a new state value based on the state and action arguments
- Must make immutable updates by copying the existing state
- Cannot contain any asynchronous logic or other "side effects"
- Redux Toolkit's createSlice API uses Immer to allow "mutating" immutable updates
Async logic is typically written in special functions called "thunks"
- Thunks receive dispatch and getState as arguments
- Redux Toolkit enables the redux-thunk middleware by default
React-Redux allows React components to interact with a Redux store
- Wrapping the app with <Provider store={store}> enables all components to use the store
- The global state should go in the Redux store, local state should stay in React components