Redux is best suited for complex applications with many features that each have some state-related data to be managed. In these cases, objects are the go-to data type to represent the entire store’s state.
For example, consider a todo app that allows a user to:
- add to a list of todos
- mark individual todos as complete or incomplete
- apply a filter to show only the completed todos, only the incomplete todos, or all of the todos
After adding a few todos and setting the filter to show incomplete todos, the state might look like this:
state = { todos: [ { id: 0, text: 'Complete the Learn Redux course', isCompleted: false }, { id: 1, text: 'Build a counter app', isCompleted: true }, ], visibilityFilter: 'SHOW_INCOMPLETE' };
In a Redux application, the top-level state
properties, state.todos
and state.visibilityFilter
, are known as slices. Each slice typically represents a different feature of the entire application. Notice that a slice can be any data value, like an array of objects (state.todos
) or just a string (state.visibilityFilter
).
As a best practice, most Redux applications begin with an initialState
that allows the programmer to do two key things:
- Plan out the general structure of the state
- Provide an initial state value to the reducer function
For the todo app, this may look like this:
const initialState = { todos: [], visibilityFilter: 'SHOW_ALL' }; const todosReducer = (state = initialState, action) => { // rest of todosReducer logic omitted };
The Recipes application will have the following three slices:
allRecipes
: an array of all recipe objectsfavoriteRecipes
: an array of recipe objects chosen by the user fromstate.allRecipes
searchTerm
: a string that filters which recipes are displayed
An example of the store’s state may look like this:
state = { allRecipes: [ {id: 0, name: 'Jjampong', img: 'img/jjampong.png' }, {id: 2, name: 'Cheeseburger', img: 'img/cheeseburger.png' }, //… more recipes omitted ], favoriteRecipes: [ {id: 1, name: 'Doro Wat', img: 'img/doro-wat.png' }, ], searchTerm: 'Doro' };
Notice that each recipe is represented as an object with an id
, name,
and img
property.
Now that you know what the state structure looks like, the first step is to create an initialState
object.
Instructions
In the store.js file, begin by declaring a new variable called initialState
and assign to it an empty object.
Now let’s add slices to the initialState
object.
First, add an allRecipes
property to the initialState
object with an initial value of an empty array.
This array will be filled once we fetch the data from a database.
Next, add a favoriteRecipes
property to the initialState
object, also with an initial value of an empty array.
The user will select which recipes to add to this slice as their favorites.
Finally, add a searchTerm
property to the initialState
object with an initial value of an empty string.
The user will change this value by using a search input field.