Ingredients. #3
Published: 2022-04-25 00:52:14

- 1 cup of State
- 1 lb of Reducers
- Mix in a medium sized Store until well blended.

I obviously wasn't talking about recipe ingredients. That'd be silly. I need to create the backbone of Redux, and for that I'm going to start off with 3 things. **State, Reducer, Store**

### `/src/features/recipes`

Inside of this folder I'm going to add the file that will hold our recipes state.

#### `cd /src/features/recipes && touch recipesSlice.js`

Now inside of this file we need to accomplish a few things.
- Create our initial state.
- Create our reducer.

But before any of that happens, we need to figure out what our state is going to look like. What is the structure of a `recipe` anyway? Well, for now, I'm not going to spend too much time trying to decide that. I'll implement the essentials and add onto it later if I come up with more data that it needs or a better way to structure it. I just want a working store I can start testing in the meantime.

### `import { createSlice } from '@reduxjs/toolkit'`

This is a beautiful tool that I will expand more on when we get to it, but for now let's just import it.


![initialState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhxao8safusdtccshwjo.png)

This is the outline of my state. An array containing recipe objects that have keys of...
`typeof` **`meal`** === string
`typeof` **`ingredients`** === array of objects
`typeof` **`directions`** === object with key names for arrays

This for sure isn't going to be the end solution, I already have ideas of what else to add, like date created and id's. But for now, this is enough to get us going. 



![recipesReducer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ete4wgyerlucjrhskt6x.png)

The creation of our reducer. Now I don't want to spend too long explaining each line of this, I'm assuming anyone reading this understands what it is I've written, but I am going to give a brief overview.

### `createSlice({})`
An **Action Creator**, **Reducer Creator**, and even lures me into a false sense of security with the ability to **mutate state** however I want... Just beautiful.

### `name: 'recipes`
Pretty self explanatory, it's the name of our state for this slice. Our state now contains `state.recipes`.

### `initialState`
We pass in the state variable we created earlier so our reducer has something to work with at the start.

### `reducers: {}`
This is where the magic happens. Inside of this I will write each of my action creators. Later on this will contain many more `actions`, `prepare callbacks`, and general state update shenanigans.

### `addMeal: (state, action) => {`
Our very first reducer! How cute. Now, to break it down..

- `addMeal` is our action. It is what we will `dispatch` later on to run this reducer.
- `state` and `action` will get passed in because we need access to the payload
- `state.push(action.payload)` above this you can see a comment showing what the action.payload will look like destructured. We will simply `push` the `action.payload` object containing our new recipe to the end of our `state`.


![Exports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n55zk0mt4uwvme6weze.png)
Now of course, let's export the `addMeal` action and the overall `recipesSlice` reducer.

## This has gotten longer than I anticipated, but I'm almost done I promise. 

### `src/app/store.js`


![store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejiyem5orej37zhzunuz.png)

This is pretty self explanatory, and the only thing that's different than the original boilerplate is the name of our reducer.
### `recipes: recipesReducer`
This let's our store know that anytime `state.recipes` is being interacted with, to let `recipesReducer` handle it.