Fork, clone, npm i, npm start
This is a pre made create-react-app project. View this video to see how the app should work once you are done coding. Video. This project is for us to practice using redux to control data that is changed through user interactions. On the left hand side of the page is a collection of different inputs that are available on a web page. When the user interacts with the input it will change some data that should update the right hand side of the page.
- In store.js we are creating the store and exporting it for anyone to use.
- Import store into any component that needs it.
- 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 by default
- You will need to decide which reducer cares about which action message type
- Combine reducers and export
- currentCount
- if "INCREASE_COUNTER" it should return the current count plus
- if "DECREASE_COUNTER" it should return the current count minus one
- 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
These components should subscribe to the store because they are showing data and they care about when it changes. Add the componentDidMount lifecycle method and subscribe to the store.
- SpecialText.js
- setState for
text
to the store statespecialText
- setState for
- Users.js
- setState for
users
to the store stateusers
- setState for
firstNameFilter
to the store statesearchText
- setState for
sortOn
to the store statecurrentUserSort
- setState for
- Counter.js
- setState for
count
to the store statecurrentCount
- setState for
- CurrentCity.js
- setState for
text
to the store statecurrentCity
- setState for
- Thermostat.js
- setState for
temp
to the store statecurrentTemp
- setState for
- VideoPlayer.js
- setState for
URL
to the store statevideoURL
- setState for
scale
to the store statevideoScale
- setState for
- Modal.js
- setState for
isLoading
to the store stateisLoading
- setState for
These components care about changing data. Call the store dispatch function where appropriate. Send in the appropriate action message.
- SpecialTextBox.js
- dispatch a message with type
SET_SPECIAL_TEXT
and value = e.target.value, in the onChange of the textbox
- dispatch a message with type
- UserButtons.js
- dispatch a message with type
ADD_USER
and value = user, in the onClick of the Add button - dispatch a message with type
REMOVE_USER
in the onClick of the Remove button
- dispatch a message with type
- CityDropDown.js
- dispatch a message with type
SET_CURRENT_CITY
and value = e.target.value, in the onChange of the select - CounterButton.js
- dispatch a message with type
INCREASE_COUNTER
in the onClick of the Increase button - dispatch a message with type
DECREASE_COUNT
in the onClick of the Decrease button
- dispatch a message with type
- SearchTextBox.js
- dispatch a message with type
SET_SEARCH_TEXT
and value = e.target.value, in the onChange of the textbox
- dispatch a message with type
- ChangeTemperature.js
- dispatch a message with type
SET_TEMP
and value = e.target.value, in the onChange of the input
- dispatch a message with type
- VideoTextBox.js
- dispatch a message with type
SET_VIDEO_URL
and value = e.target.value, in the onChange of the input
- dispatch a message with type
- SortUsers.js
- dispatch a message with type
SET_CURRENT_USER_SORT
and value = e.target.value, in the onChange of the select
- dispatch a message with type
- ScaleVideo.js
- dispatch a message with type
SET_VIDEO_SCALE
and value = e.target.value, in the onChange of the input
- dispatch a message with type
- ShowModal.js
- dispatch a message with type
SET_IS_LOADING
and value = true in the onClick of the button
- dispatch a message with type
- Modal.js
- dispatch a message with type
SET_IS_LOADING
and value = false in the onClick of the button
- dispatch a message with type
Currently, the users are hard coded in the state.js file. How could we change this so that the data is coming from an api. https://jsonplaceholder.typicode.com/users There is no new special thing we have to do. We have all the knowledge we need to do this with redux. We just need to figure out how to use them together.
- We should know how to make a fetch call by now. Where does the fetch call go?
- What do you do with the data when the fetch call is complete? Not setState.
- Is there an action message that could represent that the redux store needs to be updated with the list of users you just fetched from the api.
- Does any reducer need to be aware of this message?