Use actions to modify the state of the Redux store

In this React and Redux application, we're rendering out the stories component, which is connected to the Redux store via this connect method here. This means that inside the component our props now have access to the properties defined in the reducer.

In this example, we just have an items property that is currently an empty array. If we look at this in the browser, you can see that this matches this. That's because this reducer has a default parameter of this initial state. If we were to put one, two, three in here, go back to the browser, you'll see that we have one, two, three.

Let's make this a bit more practical. I'm going to copy in some sample data, something like you would receive from an API. To help understand the life cycle of a Redux action, we're going to have a button that can load these stories and then one that can clear them.

Inside this reducer, we want to respond to following actions, LOAD_STORIES and CLEAR_STORIES. If we get an action that has a type of LOAD_STORIES, then we're going to return items, and we're just calling stories.slice.

Stories is just the sample data that we're bringing in here. Slice will just mean we're getting a fresh copy of that. Clear stories will just return items as an empty array again. We need to create these constants. We can do that in actions file.

We'll create a folder called actions, and we'll have index.js. We'll export const LOAD_STORIES and do the same for CLEAR_STORIES. Now, we can import those. Now, this reducer is ready to start handling these state updates for us. We can go into the stories component and add these buttons.

Let's wrap everything in a div first. Then we'll have a button that has a type of Button. We'll say, "Load top three stories." Then we'll have another that says, "Clear." Finally, we'll render the story list, and we'll pass along all of the props.

Now, we can create this function in this file below. We'll say storyList gets the props. The first thing we'll want to do is check that the items array actually has some items in it. If you look back here, this could be empty. If so, we can just return null.

We can say if prop.item.length is exactly zero, return null. Otherwise we'll return another div. Inside here we can map over the items. We'll create another component that is an individual story. We'll pass along each property from this item. We'll give it a key of item.ID.

Then we'll create this component. Function story. For this we're just going to return paragraph tag and we'll say props.title. We connected this top component to the Redux store, passed along all the props to the story list.

If there were any items in the array, we're going to map over them and pass each property from the item as a prop to the story component. That's why inside the story component, we have access to props.title. If you look at the sample data, that's one of the fields here.

Now, if you go ahead and look at this in the browser right now, you're going to see there's two buttons, but they don't do very much right now. That's because we need to listen to the onClick event of each one, and dispatch an event into the store when that happens.

If we say onClick props.loadStores for that one, and Clear for that one. Down in the connect method, this takes a second argument in which we can attach functions to our props as well. If we call this one map dispatch, this gets access to the store dispatcher. We can return those two methods that we wanted, loadStores and Clear.

LoadStories is simply going to dispatch the action LOAD_STORIES, which we'll create in a moment. Clear is going to do the same thing, but for the clear. Let's go and add these functions that will create the action for us. Export function loadStories. It's just going to return type LOAD_STORIES. We can do the same thing for the clear.

Now, we can import those functions, and pass along this as the second parameter of the connect method. If we view it in the browser now, you can see that clicking this button loaded the three items in. Clicking clear hides them.