User Tools

Site Tools


reactjs_and_friends

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
reactjs_and_friends [2021/10/04 11:20]
sausage Added in code files.
reactjs_and_friends [2021/11/03 21:02]
sausage
Line 149: Line 149:
 } }
  
-export const fetchRemoteData ​= (dispatch) => {+export const fetchRemoteDataThunk ​= (dispatch) => {
     return (dispatch) => {     return (dispatch) => {
         dispatch(set_loading());​         dispatch(set_loading());​
Line 171: Line 171:
 } }
  
-export const fetchLocalPlanetData ​= (dispatch) => {+export const fetchLocalPlanetDataThunk ​= (dispatch) => {
     return (dispatch) => {     return (dispatch) => {
         dispatch(set_loading());​         dispatch(set_loading());​
Line 183: Line 183:
 </​code>​ </​code>​
  
-There are several ​actions ​in the file.+There are several ​Action Creators ​in the file.
  
   - populate_store_with_data:​ For taking data and pushing it into the store. Used once at start up.   - populate_store_with_data:​ For taking data and pushing it into the store. Used once at start up.
Line 190: Line 190:
   - set_selected_planet:​ Set when a user selects a planet.   - set_selected_planet:​ Set when a user selects a planet.
   - set_a_favourite:​ Update the list of favourites in the store.   - set_a_favourite:​ Update the list of favourites in the store.
-  - fetchRemoteData: load the planet data remotely from https://​waynejohnson.net/​planets in a cors friendly way. +  - fetchRemoteDataThunk: load the planet data remotely from https://​waynejohnson.net/​planets in a cors friendly way. 
-  - fetchLocalPlanetData: load it from a local copy, and add in an artificial delay.+  - fetchLocalPlanetDataThunk: load it from a local copy, and add in an artificial delay.
  
-The actions are written as simple functions that can pass in data. This makes it easy for a component to import an action which can be dispatched and data passed along too.+<WRAP center round tip 90%> 
 +For sake of ease I've thrown the thunks into the actions ​file, but ideally these would imported from their own file. 
 +</​WRAP>​ 
 + 
 + 
 +The Action Creators ​are written as simple functions that can pass in data. This makes it easy for a component to import an action which can be dispatched and data passed along too.
  
 A note on the two fetch data actions above: I've written them with Promise chaining with ''​then''​ rather than using the ''​await''​ operator on the promises. I'm still on the fence here, but you can re-write them accordingly to taste. A note on the two fetch data actions above: I've written them with Promise chaining with ''​then''​ rather than using the ''​await''​ operator on the promises. I'm still on the fence here, but you can re-write them accordingly to taste.
Line 244: Line 249:
   - favourites: A list of planet ids used to show which planets have been set as a favourite.   - favourites: A list of planet ids used to show which planets have been set as a favourite.
  
-As we'll see shortly, any component can use the useSelector hook to access and affect any part of the state.+As we'll see shortly, any component can use the ''​useSelector'' ​hook to access and affect any part of the state.
  
  
Line 253: Line 258:
 import { useEffect } from '​react';​ import { useEffect } from '​react';​
 import { useDispatch } from '​react-redux';​ import { useDispatch } from '​react-redux';​
-import { fetchRemoteDatafetchLocalPlanetData ​} from '​./​actions/​actions';​+import { fetchRemoteDataThunkfetchLocalPlanetDataThunk ​} from '​./​actions/​actions';​
 import ListContainer from '​./​views/​list-container.js';​ import ListContainer from '​./​views/​list-container.js';​
 import Favourites from '​./​views/​favourites.js';​ import Favourites from '​./​views/​favourites.js';​
Line 264: Line 269:
  
   useEffect( () => {    useEffect( () => { 
-    dispatch(fetchRemoteData()) +    dispatch(fetchRemoteDataThunk()) 
-    //dispatch(fetchLocalPlanetData())+    //dispatch(fetchLocalPlanetDataThunk())
   }, [dispatch] );   }, [dispatch] );
  
Line 292: Line 297:
 Also used is the LoadIndicator component which shows if loading is in progress. Also used is the LoadIndicator component which shows if loading is in progress.
  
-''​fetchRemoteData''​ and ''​fetchLocalPlanetData''​ are imported actions for loading the initial data. You can choose which one you'd rather use.+''​fetchRemoteDataThunk''​ and ''​fetchLocalPlanetDataThunk''​ are imported actions for loading the initial data. You can choose which one you'd rather use.
  
 The useEffect hook is going to be used as the trigger to load data into the application when it first starts. Providing an empty array to useEffect is the equivalent to the old-school lifecycle method ''​componentDidMount''​. Therefore, the loading will only occur on first load and will then push the data into the store. The useEffect hook is going to be used as the trigger to load data into the application when it first starts. Providing an empty array to useEffect is the equivalent to the old-school lifecycle method ''​componentDidMount''​. Therefore, the loading will only occur on first load and will then push the data into the store.
 +
 +<WRAP center round info 90%>
 +Notice that I have passed in ''​dispatch''​ into the array for useEffect. This is to remove an ugly warning. Because the array with ''​dispatch''​ is unchanging, useEffect still behaves like ''​componentDidMount''​.
 +</​WRAP>​
  
 The ''​Router''​ is added here, which contains ''​NavLink''​s. These are used instead of a ''​Nav'',​ because NavLinks allow the styling of the actively selected tab or navigation element. The ''​Router''​ is added here, which contains ''​NavLink''​s. These are used instead of a ''​Nav'',​ because NavLinks allow the styling of the actively selected tab or navigation element.
Line 466: Line 475:
  
 There has been no need to implement any local state in any of the components. All have been driven by the useSelector hook back from the main application state. There has been no need to implement any local state in any of the components. All have been driven by the useSelector hook back from the main application state.
 +
 +Finally a big thanks to my friends Andrew and Adam for reviewing the content of this article for me.
  
 ===== References and further reading ===== ===== References and further reading =====
reactjs_and_friends.txt · Last modified: 2021/11/05 01:35 by sausage