Save user input to the store and access it from an Epic
Sometimes we need to allow the user to add additional data to the store in order to be able to configure things, or to alter how certain functionality works. In this example we look at how we can save the value of a Select field in the store and use that same value from within an Epic to make an Ajax request to an API
Instructor: [00:00] There's currently no limit on how many results this API search will give us. We can add a perPage field to this reducer. We'll just initialize it with a value of 10. Then we'll need a way to update this.
[00:14] Inside this reducer, we can listen for actions of type set config. We'll spread in the existing state. We'll just allow any keys from the payload that match these. We no longer need this default return. Now we can go and create this constant and an action creator for it.
[00:34] We'll have config actions. We'll just explore the constant set config and an action creator for it. We take in a partial object, which is any object literal that contains the keys that match that config. We set it to its payload.
[00:55] In the component right next to the input field, we'll add a select element. This will have a default value of config per page. We need to bring in that config from the store. On change, we're going to set the config. We need to bring in the action creator that we made here. We can add it there, import it.
[01:26] We're not going to have access to this config just yet because where we map the state, we're only bringing in state from the beers. Let's create a function mapState. This gets the entire store. For now, we'll spread in state.beers. We'll access config directly.
[01:51] We can pass mapState here instead of this. That should give us everything from the beers reducer and everything from the config reducer, but under the config key.
[02:09] The default value of the select on page load is going to be whatever we set inside the reducer here. When an on-change event fires, we're going to call the action creator, which will produce an action of this type, which means we can import that now. It will set the values in our store.
[02:31] Let's check our progress in the browser. You can see the select box. If we change it to 5, you can see we get the set config action. The store has changed. Config per page is now 5. That isn't going to alter our API request just yet because we're not accessing that value here, from within the epic.
[02:55] Let's go back. We are currently using config.apiBase from this reducer, but we also want perPage now. It would make sense to no longer pluck the API base, but just leave it as config. The search can be config.apiBase, config.perPage, and the payload.
[03:26] Let's go and add that third parameter to this search helper, perPage. We just add it here. I can check this in the browser. If we change this to 2 and type "ship," you only get two search results. We can check the network tab to see that we did in fact pass along a second query parameter, perPage = 2.