Add Redux and the Redux Toolkit (RTK) to an Existing Application
In this lesson we install react-redux and the Redux Toolkit via NPM and then setup our own redux store using RTK's configureStore method. After creating our store we wrap our entire <App /> in the <Provider> component provided by react-redux which makes our newly created redux store accessible to any component in our application.
To install these components use:
npm install react-redux
npm install @reduxjs/toolkit
We usually place our redux store in a path of either app/store.ts or store/index.ts.
In legacy redux applications it was common to use the store/ folder and then have all kinds of reducer and action files inside of it. Now it's recommended by the redux style guide to use an app/ folder and the slices of the store should live in feature folders alongside the components that are using them. This application already splits up our components into various feature folders and app-wide or shared utilities are living in the app folder.
Instructor: [0:00] Open up a new terminal window and head into the same folder. Then type npm install react-redux and then npm install @reduxjs/toolkit. With those installed, head back into your IDE, and inside the app folder, create a file called store.ts.
[0:15] Inside of store, type import {configureStore} from '@reduxjs/toolkit.' Below that, type export const store = configureStore. Pass in an object with a single key of reducer, which, for now, just has an empty object.
[0:31] Now, open up your main.tsx file. At the top of the file, import {Provider} from 'react-redux' and also import store from './app/store.' We're going to wrap our app in a Provider component, and we're going to pass in as a prop our Redux store. Wrapping our app in this Provider allows any component in our application to access our Redux store.
[0:56] Now that we've set up Redux, I wanted to show you this cool diagram about how Redux works. This comes from the Concepts and Data Flow section of the Redux docs, and it concisely covers Redux's core design.
[1:06] Over here on the right, you can see the Redux store itself. This is the single immutable source of truth for the global state in your application. It's all stored in here. UI components subscribe to updates for specific pieces of data in that store using something called a selector.
[1:21] Anytime that piece of data changes, your component will be re-rendered. When you want to change data in the Redux store, you can't do it directly. Instead, you need to dispatch an action.
[1:32] An action, as you can see here, is a simple object describing an event that occurred. It includes a type property and a payload with some kind of data. When an action makes it into your Redux store, Redux passes it to any number of reducer functions.
[1:45] Reducers are functions that take in the current global state and the action, and return a new global state. After all of your reducers have had a chance to respond to that action, any subscribed UI components will be re-rendered with the new data. This one-way data flow makes it easy to trace how changes occur in Redux applications.
[2:06] I'm excited to show you how to put this to work in your applications using Redux and RTK.
Hey, Here is an article that might help you gain clarity on how RTK differs from redux. https://redux.js.org/introduction/why-rtk-is-redux-today
Is this concept still true if it is one reducer amongst others that is updated? Will the entire store be updated even though it is concerning one reducer?
Yes it does update the entire store, but that doesn't mean that they all re-render! If a component subscribes to updates for the entire store it will re-render, but individual reducers that aren't changed will still be the same and therefore a component subscribing to a different part of the store won't generally be updated.
"reducer creating a new global state after it has been changed" Is this concept still true if it is one reducer amongst others that is updated ? Will the entire store be updated even though it is concerning one reducer; which will then create re-renders for all components subscribing to any piece of data even though those were not updated per se ( with changed values ) ?