Redux with APIs lesson notes

redux-apis.md

Redux with APIs

Objectives

• Update state based on API calls with Redux

Exercise

Start by cloning and setting up the API for this lesson:

• Music Box API

Then clone and setup the client:

• Music Box Client

Redux Setup

Use your own checklist or follow the steps bellow to setup redux in the Music Box Client.

1. Begin by installing redux, react-redux
2. Create a store.js file that exports a newly created store (you can temporarily use an anonymous function for the reducers)
3. Add the store to index.js using the Provider componenet from react-redux
4. Create an artists reducer file with a blank array as inisital state
5. Add the artist reducer to store.js using combineReducers
6. Connect App.js to your redux store using connect

Actions with redux-thunk

• Install redux-thunk and redux-logger packages with npm. How do these packaged relate to redux? What is redux-thunk and why are we using it now? How does

  Your answer...

• Next we're going to create an action that will request all the artists from our server. Create a new actions folder and file. What changes to our actions do we need to make now that we're using redux-thunk?

  Your answer...

• Since we'll be working with asynchronous code, do we need to do anything different with our reducer? Why or why not?

  Your answer...

• Update your reducer to listen for the action type you created. Then, add your action creator to the App.js file. What component lifecycle method do you use in App.js?

  Your answer...

Adding Functionality

• How might we implement the delete functionality for each artist? Consider that to delete an artist you will need to update both the API and the local state. After spending a minute or two planning, complete this functionality. There are at least two different ways to update the local state.

  What approach did you take?

• Consider how creating a new resource might work with Redux. In this case, there are a number of considerations to think about:

  • What happens if there's an error in the form input?
  • What happens if there's an error that comes back from the database?
  • What happens if a new record is created?

  Take a few minutes with your group to discuss how you might implement the create feature.

  What you discussed...

Discuss with other groups how they're planning to solve the problem. Then, do it! Make sure that you show any errors that arise from submitting the form.