- Fork, Clone, npm install, npm start
- The interface for this project should look familiar. It is using the same code as the express practice. We now to alter the client code to use redux thunk instead of fetch calls directly in the components.
- http://localhost:4001/products
- http://localhost:4001/contacts
- http://localhost:4001/vehicles
- http://localhost:4001/comments
- loadContacts
- return a thunk function
- make a fetch call to /contacts
- in the second then, dispatch to contactsLoaded
- contactsLoaded(contacts)
- return an action
- type is “CONTACTS_LOADED”
- value is contacts
- loadVehicles
- return a thunk function
- make a fetch call to /vehicles
- in the second then, dispatch to vehiclesLoaded
- vehiclesLoaded(vehicles)
- return an action
- type is “VEHICLES_LOADED”
- value is vehicles
- loadComments
- return a thunk function
- make a fetch call to /comments
- in the second then, dispatch to commentsLoaded
- commentsLoaded(comments)
- return an action
- type is “COMMENTS_LOADED”
- value is comments
- loadProducts
- return a thunk function
- make a fetch call to /products
- in the second then, dispatch to productsLoaded
- productsLoaded(products)
- return an action
- type is “PRODUCTS_LOADED”
- value is products
-
createProduct(product)
- return a thunk function
- make a fetch call to /products as a POST
- include the product in the body
- in the first then, dispatch to loadProducts
-
createContact(contact)
- return a thunk function
- make a fetch call to /contacts as a POST
- include the contact in the body
- in the first then, dispatch to loadContacts
-
createComment(comment)
- return a thunk function
- make a fetch call to /comments as a POST
- include the comment in the body
- in the first then, dispatch to loadComments
-
createVehicle(vehicle)
- return a thunk function
- make a fetch call to /vehicles as a POST
- include the vehicle in the body
- in the first then, dispatch to loadVehicles
- Create reducers based on the state in state.js
- Determine which action the reducers should care about
- return the appropriate value
- In AppContainer.js
- Import connect
- Import actions loadContacts, loadVehicles, loadComments, loadProducts
- mapDispatchToProps for these actions to props of the same name
- Connect and export
- Remember how to use connect when there is no mapStateToProps
- In App.js
- call loadContacts, loadVehicles,loadComments,loadProducts in componentDidMount
- Base points - 20
- Contacts appear in list - 10
- Vehicles appear in list - 10
- Comments appear in list - 10
- Products appear in list - 10
- Create new contact shows up in list - 10
- Create new vehicle shows up in list - 10
- Create new comment shows up in list - 10
- Create new product shows up in list - 10
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent