Course Content
Expert React
Expert React
4. Formik
6. Next Steps
Store
Step 1: Create Redux store
Theory
The Redux store is a single source of truth for the application's state. It holds the complete state tree of the application. The state in Redux is read-only, and the only way to change it is by dispatching actions. The store can be accessed and modified using Redux Toolkit's functions and hooks.
Practice
We have created the store.js
file in the redux
folder. We are ready to set up the entire store. Here's an example of how it can be done:
Code explanation: This code configures the Redux store using the configureStore
function provided by the @reduxjs/toolkit
package. Let's break it down step by step.
- Line 1: The code imports the
configureStore
function from the@reduxjs/toolkit
package. This function simplifies the process of creating a Redux store by providing sensible defaults and built-in middleware. - Line 2 imports the
counterReducer
from the./reducers/counterReducer
file. This reducer function handles the state changes for the "counter" slice of the Redux store. The logic inside of that file will be created further. - Line 4-8: The
configureStore
function is called with an object as its argument. This object specifies the store's configuration options. In this case, thereducer
option is the only option (Line 5).- The
reducer
option is an object that maps the state slices to their corresponding reducer functions. In this case, thecounter
slice of the state is mapped to thecounterReducer
function. - The
configureStore
function returns a Redux store object that contains the application's state and provides methods to interact with it.
- The
- Line 10: Finally, the
store
object is exported as the default export of this module so that it can be used in other parts of the application.
Note
To summarize, this code sets up a Redux store with a single "counter" slice of the state, using the
counterReducer
to handle state changes. The resulting store is then exported for use in other parts of the application.
Step 2: Integrate Redux store into the app
Practice
Once the store is configured, it can be used in the app. We have to provide the store
to the entire app. We will do it in the index.js
file.
Code explanation: Integration of the Redux store into a React app using the react-redux
library. Let's break it down step by step.
- Line 3: Import the
Provider
component from thereact-redux
library. - Line 5: Import the
store
object from a file calledstore.js
, located in a folder calledredux
. - Line 9-13: The
Provider
component wraps theApp
component. TheProvider
component is a higher-order component provided byreact-redux
that makes the Redux store available to the components in the app. - Line 9: The
store
object is passed as a prop to theProvider
component. This prop is namedstore
, and its value is the importedstore
object.
Complete code
Everything was clear?