- Create Reducers in reducers/index.js
- Look at state.js and create a reducer for each piece of state
- Remember reducers take 2 parameters:
state
, andaction
- Remember to give state a default value appropriate for what type it is in the reducer. Number, string, array, object
- Remember to return state if the reducer doesn't care about the action
- You will need to decide which reducer cares about which action type
- Combine reducers and export
- currentCount
- if "INCREASE_COUNTER" of "DECREASE_COUNTER" should return the current count plus one or minus one, depending on the action
- specialText
- if "SET_SPECIAL_TEXT" should return the action value
- currentCity
- if "SET_CURRENT_CITY" should return the action value
- users
- if "REMOVE_USER" OR "ADD_USER" should return slice(1) to remove the first user or [...state,action.value] to add a user
- currentTemp
- if "SET_TEMP" should return action value
- isLoading
- if "SET_IS_LOADING" should return action value
- videoURL
- if "SET_VIDEO_URL" should return action value
- searchText
- if "SET_SEARCH_TEXT" should return action value
- currentUserSort
- if "SET_CURRENT_USER_SORT" should return action value
- videoScale
- if "SET_VIDEO_SCALE" should return action value
- increaseCounter()
- type = "INCREASE_COUNTER"
- decreaseCounter()
- type = "DECREASE_COUNTER"
- setSpecialText(text)
- type = "SET_SPECIAL_TEXT"
- value = text
- removeUser()
- type = "REMOVE_USER"
- addUser(user)
- type = "ADD_USER"
- value = user
- setSearchText(text)
- type = "SET_SEARCH_TEXT"
- value = text
- setIsLoading(isLoading)
- type = "SET_IS_LOADING"
- value = isLoading
- setTemp(temp)
- type = "SET_TEMP"
- value = temp
- setCurrentCity(city)
- type = "SET_CURRENT_CITY"
- value = city
- setVideoURL(URL)
- type = "SET_VIDEO_URL"
- value = URL
- setCurrentUserSort(sort)
- type = "SET_CURRENT_USER_SORT"
- value = sort
- setVideoScale(scale)
- type = "SET_VIDEO_SCALE"
- value = scale
- Create a store.js file
- Import state from state.js
- import createStore from redux
- import reducers from reducers
- create the store
- export the store
- In index.js
- Import Provider from react-redux
- Import store from store.js
- Use Provider component to wrap App
- Make sure there is no whitespace between Provider and App
- Give Provider a prop “store” and the value of the store
- We need to leave the components alone and create containers
- In the container folder, create a container file for each component i.e. SpecialTextContainer.js
- Import the appropriate component into the container file
- This is where the connect function and the actions should be imported
- This is where mapStateToProps and mapDispatchToProps should be
- This is where you should do the connecting
- Export the container
- Import connect from react-redux into all containers
- Import the appropriate component into the container
- Create mapStateToProps function
- Call the connect function
- SpecialTextContainer.js
- map a prop called
text
to the statespecialText
- map a prop called
- UsersContainer.js
- map a prop called
users
to the stateusers
- map a prop called
firstNameFilter
to the statesearchText
- map a prop called
sortOn
to the statecurrentUserSort
- map a prop called
- CounterContainer.js
- map a prop called
count
to the statecurrentCount
- map a prop called
- CurrentCityContainer.js
- map a prop called
text
to the statecurrentCity
- map a prop called
- ThermostatContainer.js
- map a prop called
temp
to the statecurrentTemp
- map a prop called
- VideoPlayerContainer.js
- map a prop called
URL
to the statevideoURL
- map a prop called
scale
to the statevideoScale
- map a prop called
- ModalContainer.js
- map a prop called
isLoading
to the stateisLoading
- map a prop called
- Import the connect function from react-redux
- create mapDispatchToProps
- connect the component so that it becomes a container
- export container
- SpecialTextBoxContainer.js
- import
setSpecialText
action - map prop
set
to actionsetSpecialText
- import
- UserButtonsContainer.js
- import
addUser
andremoveUser
action - map prop
add
to actionaddUser
- map prop
remove
to actionremoveUser
- import
- CityDropDownContainer.js
- import
setCurrentCity
action - map prop
set
to actionsetCurrentCity
- import
- ChangeTemperatureContainer.js
- import
setTemp
action - map prop
set
to actionsetTemp
- import
- CounterButtonContainer.js
- import the increaseCounter and decreaseCounter actions
- map prop
increase
to actionincreaseCounter
- map prop
decrease
to actiondecreaseCounter
- SearchTextBoxContainer.js
- import
setSearchText
action - map prop
set
to actionsetSearchText
- import
- ChangeTemperatureContainer.js
- import
setTemp
action - map prop
set
to actionsetTemp
- import
- VideoTextBoxContainer.js
- import
setVideoURL
action - map prop
set
to actionsetVideoURL
- import
- SortUsersContainer.js
- import
setCurrentUserSort
action - map prop
set
to actionsetCurrentUserSort
- import
- ScaleVideoContainer.js
- import
setVideoScale
action - map prop
set
to actionsetVideoScale
- import
- ShowModalContainer.js
- import
setIsLoading
action - map prop
setIsLoading
to actionsetIsLoading
Show
- import
- ModalContainer.js
- import
setIsLoading
action - map prop
setIsLoading
to actionsetIsLoading
- import
- Change App.js
- Use containers instead of components
- Basically, just add the word Container everywhere a component is referenced