Structuring the Code

Having all our code in a single file is a bad idea. In Redux, it’s common for the directory structure to follow the names of the Redux “actors.” Reducers are placed in the reducers directory in the root.js file along with the main reducer (commonly called the root reducer). Action creators go in the actions directory, divided by the type of object or data they handle. Our action creators are actions/recipes.js and actions/ingredients.js.

Actions

First, we will create the actions directory. Inside of it, we will place two files: recipes.js and ingredients.js. They will hold our action creators, logically separated by features. We will also export the action creators:

We add the following in the actions/recipes.js file:

export const addRecipe = (name) => ({
  type: 'ADD_RECIPE', name
});

And in the actions/ingredients.js

export const addIngredient = (recipe, name, quantity) => ({
  type: 'ADD_INGREDIENT', recipe, name, quantity
});