redux stores business selection

[Guin-]

• create BusinessSearch container component
• move logic from SearchForm into BusinessSearch component (state gets passed down as props)
• fetchBusiness action creator dispatches actions and makes the api call.
• rootReducer returns app state
• create store in app.js
• mapStateToProps --> BusinessSearch container has selected business available as a prop
• create Business component (just create one to make sure you can access the data as
  a prop) Actual business detail component/view will be done in another ticket.
• add PropTypes to components
• clean up code

Entry Point:

index.js
provider and create store here

Action Creators:

actions/index.js

requestBusinessDetail —> fetches business detail endpoint for selected business
receiveBusinessDetail —> receives business detail data

redux-thunk
actionCreator can return a function --> this function is executed through the middleware. Here we can make api calls using fetch.

• check if this is necessary: use babel-polyfill and fetch from isomorphic-fetch for better browser support

fetchBusiness(business)
dispatches requestBusinessDetail
fetch call here
dispatches receiveBusinessDetail
handles success and failure states

Design the State Shape:

{
     businessDetail: 
          isFetching: False
          item: { business object }
          lastUpdated: date
}

Reducers:

reducers/index.js
import actions

businessDetail: returns default empty state or requestBusinessDetail, receiveBusinessDetail, business object

const rootReducer = combineReducers({
businessDetail
})

Presentational React Components:

SearchForm
BusinessDetail

• gets selected business object passed down as props

Container Components:

BusinessSearch

• move handleSearch, renderMenuItemChildren , and handleTypeaheadResultClick logic here
• pass these down as props to SearchForm component

Component Hierarchy:

• BusinessSearchContainer
  • SearchForm
  • BusinessDetail
    • InspectionsList

if you have props as an object you can pass it a spread operator in jsx to pass the whole props object {...props}. Its easy to accidentally pass props that are not needed this way.

[galarant]

Nice write-up! Very clear description of the problem, this helped me with review.