Topics:
axios
package- AJAX
- Promises
- Middleware
redux-thunk
package- optional:
redux-logger
package
-
Last week we built an app that interfaced with a
RESTful
API. That same project is now to be built using React & Redux. -
Take your examples from the mini project and use them to build a more sophisticated Application. Have fun!
-
Once your server is up and running, the URL you'll be able to hit from within your action creators is
http://localhost:5000
. -
Take a look at the endpoints that our API has to offer in
server.js
.- [GET] to
/api/friends
: returns the list of friends. - [POST] to
/api/friends
: creates a friend and return the new list of friends. Pass the friend as thebody
of the request (the second argument passed toaxios.post
). - [PUT] to
/api/friends/:id
: updates the friend using theid
passed as part of the URL. Send the an object with the updated information as thebody
of the request (the second argument passed toaxios.put
). - [DELETE] to
/api/friends/:id
: removes the friend using theid
passed as part of the URL.
- [GET] to
- Run
yarn
ornpm i
inside the root directory of this project to install dependencies. - Run
yarn start
ornpm start
to start the API server. - Run
create-react-app friends
in a separate terminal window in the root directory of the project to create your starter application. cd
into the friends folder and typeyarn add redux react-redux redux-thunk redux-logger axios
ornpm i redux react-redux redux-thunk redux-logger axios
, which will install the needed dependencies.- You will create a list of your friends using React and Redux.
- A possible flow of steps will be to create your Components, action creators, reducers, root reducer and your Redux store. Then use the Provider component from
react-redux
to pass the store to your root component andconnect
the React components that need access to the store. - Don't forget to hook up the store using the
Provider
tag inside ofsrc/index.js
, passing it your root reducer. - You will need to use
redux-thunk
as a middleware inside ofsrc/index.js
. You'll want to be sure to pass it toapplyMiddleware()
then feed it into your createStore function. - If you so choose, include
redux-logger
to your middleware. You're going to have plenty of action creators that will consume our API so you'll get plenty of actions triggered.
- Your initial state could (but doesn't have to) look something like this:
{
fetchingFriends: false,
friendsFetched: false,
friendsSaved: false,
savingFriends: false,
updatingFriend: false,
friendUpdated: false,
deletingFriend: false,
friendDeleted: false,
friends: [],
error: null
}
- This is a pretty large state tree, but each field is extremely simple.
- All of your items in your state tree represent a make up of actions that you're going to make asynchronously. Think about your application and the state you need. This root reducer object will represent that state.
- Each
friend
item that is in thefriends
array should have the following format:
{
id: 1
name: 'Joe',
age: 24,
email: '[email protected]',
}
- For this project you'll need to create a few React components that will interact with your Redux state.
- This app can all be built in terms of a single view made up of multiple components. Some components will be connected to your Redux Store and others will get their data passed down as props from the connected components.
No need for a router here. We can fit all we need into one page with some proper styling and layout decisions.
- Your component tree could (but doesn't have to) look a like this.
index.js
- App.js
- Friends.js
- CreateFriendForm.js
- UpdateFriendForm.js
- If you'd like, you can create multiple components and
connect
them all up to yourredux
state tree. You could have a component who's sole purpose is to render a form for updating a user; another component who's sole purpose is for creating users; and then another component who's sole purpose is to delete a user. - It really is up to you how you build this project. You'll be given a couple of days to work on it so don't feel too overwhelmed at first.
- Inside of
App.js
I suggest doing the friend fetching for your friends data from withincomponentDidMount()
. You'll need to call an action creator that you build in order to fetch your friends. - A crude example of what this could potentially look like would be:
- You Definitely want to style your application to look much better than mine!
- In the requirements for this project, we implemented a GET operation and a POST operation. Add two more actions, one for making a PUT request, and the other for making a DELETE request.
- Style the friends list and the input field and make everything look nice.
- Expand the number of properties that you put on each friend object. Feel free to remove the dummy data on the server or modify it in any way.