At this point, you may have begun thinking that store.js is getting pretty long, and yet the Recipes app only has three slices! Imagine trying to fit the logic for an application with a dozen or more slices into one file. That would not be fun.
Instead, it is more common, and a better practice, to break up a Redux application using the Redux Ducks pattern, like so:
src/ |-- index.js |-- app/ |-- store.js |-- features/ |-- featureA/ |-- featureASlice.js |-- featureB/ |-- featureBSlice.js
As you can see in your coding workspace, this file structure has already been set up for you.
All of the Redux logic lives within the top-level directory called src/. It contains:
- The entry point for the entire application, index.js (we will return to this file in the next exercise).
- The sub-directories app/ and features/.
The src/app/ directory has only one file (for now), store.js. As before, the ultimate purpose of this file is to create the rootReducer
and the Redux store
. Now, however, you’ll notice that the file is empty! So where did the reducers and action creators go?!
The src/features/ directory, and its own src/features/featureX/ sub-directories, contain all of the code relating to each individual slice of the store
‘s state. For example, for the state.favoriteRecipes
slice, its slice reducer and action creators can be found in the file called src/features/favoriteRecipes/favoriteRecipesSlice.js.
Lucky for you, we took care of much of the tedious work involved in refactoring this code. In addition to creating new folders, new files, and copying over the relevant code, this refactor involved exporting each of the slice reducers and action creators, so that they could be imported back into store.js.
And that’s where you come in!
Instructions
The reducers
object passed to combineReducers()
should contain the slice reducers responsible for updating the various slices of the store
‘s state. In the prior lesson, those slice reducers all existed in the same file. Now, you need to import them.
At the top of the store.js file, import the following values from their respective files:
allRecipesReducer
favoriteRecipesReducer
searchTermReducer
Excellent! Now that you have imported the slice reducers, you use them to construct the reducers
object to be passed to combineReducers()
.
Within the reducers
object, add three key:value
pairs where each key
is the name of a slice and each value
is the slice reducer responsible for managing that slice’s state.
Now that you have the reducers
object, you can create the store
using a combination of the combineReducers()
and createStore()
Redux functions.
You are going to do this all in one line of code!
- First call
combineReducers()
withreducers
as an argument. - Then, pass the entire
combineReducers(reducers)
function call as an argument tocreateStore()
. - Finally, store the value returned by
createStore()
in a new variable calledstore
.
Well done! You’ve reconnected all of the slice reducers from separate files back into the store
within src/app/store.js. In the next exercise, you’ll learn how to build on this application structure by incorporating React components and dispatching actions from them. To do this, the store
needs to be available to other parts of the application.
Export the store
value from src/app/store.js.