Redux Application Structure
To recap from the previous chapter, we can set up a basic application using the following command: npx create-react-app my-app --template redux.
Our focus here is the src folder since the public folder has no significant change. In the src folder, we will see many files and folders however following are the ones to be taken into consideration before we go on to understanding the remaining parts:
srcappstore.js
featurescountercounter.jscounterSlice.js
index.jsApp.js
Following are the files found in it:
- The
appfolder always contains astore.jsfile, which contains the code for creating the Redux store; - The
featuresfolder is unnecessary though it helps organize all the feature-focused components and their reducers. Thecounter.jsfile contains theCountercomponent, and thecounterSlice.jscontains the reducer, which is supposed to handle the state changes of theCountercomponent; index.jsis the entry point of the application, this is executed first when the application starts;App.jscontains the top-level componentApp.
Here is the codesandbox with the application. Tap the top left three lines to access other files.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Ask me questions about this topic
Summarize this chapter
Show real-world examples
Awesome!
Completion rate improved to 3.45
Redux Application Structure
Swipe to show menu
To recap from the previous chapter, we can set up a basic application using the following command: npx create-react-app my-app --template redux.
Our focus here is the src folder since the public folder has no significant change. In the src folder, we will see many files and folders however following are the ones to be taken into consideration before we go on to understanding the remaining parts:
srcappstore.js
featurescountercounter.jscounterSlice.js
index.jsApp.js
Following are the files found in it:
- The
appfolder always contains astore.jsfile, which contains the code for creating the Redux store; - The
featuresfolder is unnecessary though it helps organize all the feature-focused components and their reducers. Thecounter.jsfile contains theCountercomponent, and thecounterSlice.jscontains the reducer, which is supposed to handle the state changes of theCountercomponent; index.jsis the entry point of the application, this is executed first when the application starts;App.jscontains the top-level componentApp.
Here is the codesandbox with the application. Tap the top left three lines to access other files.
Thanks for your feedback!