reactjs_and_friends
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | Next revision Both sides next revision | ||
|
reactjs_and_friends [2021/10/04 11:20] sausage Added in code files. |
reactjs_and_friends [2021/10/08 12:48] sausage Changes from feedback by Andrew and Adam. Thank you. |
||
|---|---|---|---|
| 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 193: | Line 193: | ||
| - fetchLocalPlanetData: load it from a local copy, and add in an artificial delay. | - fetchLocalPlanetData: 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. | + | 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 244: | ||
| - 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 295: | Line 295: | ||
| 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. | ||
| 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. | ||
reactjs_and_friends.txt ยท Last modified: 2021/11/05 01:35 by sausage
Page Tools
