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/toolkitWe 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.
"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 ) ?
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.