- 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.
Clone down this lab and run npm install
.
Run the test suite via npm test
. mocha.run()
will not work.
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
- 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 aninventoryItemsReducer
, 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:
- The
[
{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 theInventoryList
andNewInventoryItem
components. -
The
App
component should be connected to the store via theconnect
function. It should usemapStateToProps
to get the inventory items out of state andmapDispatchToProps
to gain access to your action creator functions. -
App
is a container component. It should pass the inventory items down toInventoryList
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 ofApp
'scomponentWillMount
. -
App
should containNewInventoryItem
, which is a form for a new inventory item.NewInventoryItem
should use a prop as a callback function to tellApp
to dispatch the"ADD_INVENTORY_LIST_ITEM"
action when the user submits the form.