⚠️ This lesson is retired and might contain outdated information.

Save user input to the store and access it from an Epic

Shane Osbourne
InstructorShane Osbourne
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated a year ago

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.

~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today