- 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
currentCountif "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~~
currentCityif "SET_CURRENT_CITY" should return the action value
usersif "REMOVE_USER" OR "ADD_USER" should return slice(1) to remove the first user or [...state,action.value] to add a user
currentTempif "SET_TEMP" should return action value
isLoadingif "SET_IS_LOADING" should return action value
videoURLif "SET_VIDEO_URL" should return action value
searchTextif "SET_SEARCH_TEXT" should return action value
currentUserSortif "SET_CURRENT_USER_SORT"should return action value
videoScaleif "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 fileImport state from state.jsimport createStore from reduximport reducers from reducerscreate the storeexport the store
In index.jsImport Provider from react-reduxImport store from store.jsUse Provider component to wrap AppMake sure there is no whitespace between Provider and AppGive 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.jsmap a prop calledtext
to the statespecialText
UsersContainer.jsmap a prop calledusers
to the stateusers
map a prop calledfirstNameFilter
to the statesearchText
map a prop calledsortOn
to the statecurrentUserSort
CounterContainer.jsmap a prop calledcount
to the statecurrentCount
CurrentCityContainer.jsmap a prop calledtext
to the statecurrentCity
ThermostatContainer.jsmap a prop calledtemp
to the statecurrentTemp
VideoPlayerContainer.jsmap a prop calledURL
to the statevideoURL
map a prop calledscale
to the statevideoScale
ModalContainer.jsmap a prop calledisLoading
to the stateisLoading
- Import the connect function from react-redux
- create mapDispatchToProps
- connect the component so that it becomes a container
- export container
SpecialTextBoxContainer.jsimportsetSpecialText
actionmap propset
to actionsetSpecialText
UserButtonsContainer.jsimportaddUser
andremoveUser
actionmap propadd
to actionaddUser
map propremove
to actionremoveUser
CityDropDownContainer.jsimportsetCurrentCity
actionmap propset
to actionsetCurrentCity
CounterButtonContainer.jsimport the increaseCounter and decreaseCounter actionsmap propincrease
to actionincreaseCounter
map propdecrees
to actiondecreaseCounter
SearchTextBoxContainer.jsimportsetSearchText
actionmap propset
to actionsetSearchText
ChangeTemperatureContainer.jsimportsetTemp
actionmap propset
to actionsetTemp
VideoTextBoxContainer.jsimportsetVideoURL
actionmap propset
to actionsetVideoURL
SortUsersContainer.jsimportsetCurrentUserSort
actionmap propset
to actionsetCurrentUserSort
ScaleVideoContainer.jsimportsetVideoScale
actionmap propset
to actionsetVideoScale
ShowModalContainer.jsimportsetIsLoading
actionmap propsetIsLoading
to actionsetIsLoading
Show
ModalContainer.jsimportsetIsLoading
actionmap propsetIsLoading
to actionsetIsLoading
Change App.jsUse containers instead of componentsBasically, just add the word Container everywhere a component is referenced