Learn

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() with reducers as an argument.
Then, pass the entire combineReducers(reducers) function call as an argument to createStore().
Finally, store the value returned by createStore() in a new variable called store.

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?