Redux Toolkit - Tools - Components & Hooks


In this lesson, you will learn how to apply the core concepts of Redux to a real Redux application.

Remember, Redux applications are built upon a one-way flow of data model and are managed by the store:

  • The state is the set of data values that describes the application. It is used to render the user interface (UI).
  • Users interact with the UI which dispatch actions to the store. An action is an object that expresses a desired change to the state.
  • The store generates its next state using a reducer function which receives the most recent action and the current state as inputs.
  • Finally, the UI is re-rendered based on the new state of the store and the entire process can begin again.

Building an application that follows the core principles of Redux can be done without external libraries. However, the dedicated Redux library provides some very useful tools for handling the most common aspects of building a Redux application and helps ensure that the core Redux principles are enforced.

Provider :
If you haven't already done so, follow the standard pattern for providing the Redux store to the rest of your React application component.

ConfigureStore :
An RTKQ service generates a "slice reducer" that should be included in the Redux root reducer, and a custom middleware that handles the data fetching. Both need to be added to the Redux store.