learn-co-curriculum / react-redux-intro-lab

practice using redux to display data and create a new item

React + Redux Lab: Flatiron Bakery

Objectives

• Practice using Redux to retreive and display data from application state
• Implement the container component pattern
• Use Redux tools to build a feature in which a user can add an item to state.

Instructions

Getting Started

Clone down this lab and run npm install.

Run the test suite via npm test. mocha.run() will not work.

Intro

You were just hired by the fast-growing international baking conglomerate, Flatiron Bakery. You're first assignment is to work on this simple React + Redux inventory application.The app should have the following features:

• Display a list of existing inventory items. The list should show each item's quantity and description
• Provide a simple form for a user to add a new item to the inventory

Step 1:

• First, you'll need to configure the Redux store and pass it to your component tree via the Redux <Provider>
• Then, build a root reducer using the combineReducers function. combineReducers should take in an inventoryItemsReducer, which you will build.
• Your inventoryItemsReducer should know how to respond to the following actions:
  • "GET_INVENTORY_LIST_ITEMS"
  • "ADD_INVENTORY_LIST_ITEM"
• Build two action creator functions
  • The getInventoryItems action creator should return an object that has a payload of the following items:

[
  {quantity: '3lbs', description: "flour"}, {quantity: "2 dozen", description: "eggs"}, {quantity: '2lbs', description: "sugar"}
]

• The addInventoryListItem action creator should take in an argument of a quantity and description, and use that info to create a new inventory item object.

• Once you're action creators and reducer are in place, build out the App component and the InventoryList and NewInventoryItem components.

• The App component should be connected to the store via the connect function. It should use mapStateToProps to get the inventory items out of state and mapDispatchToProps to gain access to your action creator functions.

• App is a container component. It should pass the inventory items down to InventoryList to be rendered as a list.

• We've hardcoded a few items items to show up on the inventory list. You're need to dispatch the "GET_INVENTORY_LIST_ITEMS" action as part of App's componentWillMount.

• App should contain NewInventoryItem, which is a form for a new inventory item. NewInventoryItem should use a prop as a callback function to tell App to dispatch the "ADD_INVENTORY_LIST_ITEM" action when the user submits the form.

react-redux-intro-lab's Issues

There's too much setup before tests can run

Maybe this is unavoidable, but I'm finding I'm having to create a lot of files before I can even run the tests. Should the empty exports be setup in the files so we can at least run the tests? Is there a way we can run test selectively such that we can instruct students to do this bit by bit?

Have students use `learn` rather than `npm test`

In an effort to capture better heartbeat data, I think we want to tell students to use learn rather than npm test here.

We can also remove the note about mocha.run() not working. It doesn't work on any lab in this track.

I don't think we ever explain how to dispatch when using Provider

Taking a peak at the solution and doing some googling, I think we will want to explain this.

http://stackoverflow.com/a/34458710 this may be a good resource as well.

Add testing around form submission working

Not sure how easy it is to implement, but it would be nice to add some testing to make sure the form submissions are working. At the moment, we're just checking to see if we have a form that has two fields.