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
reactjs_and_friends [2021/10/08 12:48]
sausage Changes from feedback by Andrew and Adam. Thank you.
reactjs_and_friends [2021/11/05 01:35] (current)
sausage [ReactJS and Friends Refresher]
Line 5: Line 5:
 Hopefully this article will serve as a good reminder for when you need to stretch your legs again. Hopefully this article will serve as a good reminder for when you need to stretch your legs again.
  
-Facebook are not known for the fostering of healthy relationships and interactions,​ but they sure do make a darned good Javascript framework. ​+Facebook are not known for the fostering of healthy relationships and interactions,​ but they make a darned good Javascript framework. ​
  
 The name React (in my option) comes from the fact that the rendering reacts to the changes in the data that the components themselves are bound to. But without some extra libraries, the React framework is of limited real-world use. The name React (in my option) comes from the fact that the rendering reacts to the changes in the data that the components themselves are bound to. But without some extra libraries, the React framework is of limited real-world use.
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 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. 
 + 
 +<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. 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.
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.
  
-However, do notice ​that I have passed in ''​dispatch'' ​in the array for useEffect. This still behaves like ''​componentDidMount'' ​but will remove an ugly lint warning+<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 468: 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.1633697286.txt.gz · Last modified: 2021/10/08 12:48 by sausage