BlogPost 407
Discuss in words something you learned in class today or this week.
I learned how to handle fetch calls using useEffect in a react component.
the problem: When to fetch data from the database and update it to the redux state? If simply fetch data every time the component mounts/updates, and that fetch call updates the redux state, you have an infinite loop.
Solution: Add a dbUpdatedAt property in redux state and initialize to null. Then, whenever you add, edit, or delete things in the database, dispatch an action that changes dbUpdatedAt to a new date() timestamp. Then, make it so you only fetch new data if dbUpdatedAt is different:
Get Patrick’s stories in your inbox
Join Medium for free to get updates from this writer.
useEffect(()=>fetchdata(), [dbUpdatedAt])
What is Redux Thunk used for?
Redux Thunk is used for asynchronous actions that update the global redux state, such as fetching data, and dispatching the data to the state.
Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.
https://www.digitalocean.com/community/tutorials/redux-redux-thunk
What is the difference between React Native and React?
React Native is a React-like library for developing mobile apps for android or apple devices, whereas react is a front end library for web applications to run on the browser environment.
React Native is for mobile applications while React is for websites(front-end). Both are frameworks invented by Facebook. React Native is a cross platform developing framework meaning one could write almost the same code for both IOS and Android and it would work.
https://stackoverflow.com/questions/34641582/what-is-the-difference-between-react-native-and-react
Are you familiar with AMD/require.js or commonjs? What can they do for you?
CommonJS allows developers to export/import modules. Modules are reusable bits of code. CommonJs wraps all files in a require() function and gives each file a module.exports object. This way we can module.exports at the end of the file being exported, and ‘require’ it inside the file importing it: const moment = require(‘moment’)
Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework.
Write some code that simulates flipping a single coin however many times the user decides. The code should record the outcomes and count the number of tails and heads. You may use any environment you like.
https://www.npmjs.com/package/coin-toss
Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?
Start with a number n > 1. Find the number of steps it takes to reach one using the following process: If n is even, divide it by 2. If n is odd, multiply it by 3 and add 1.
I can’t find a node library which could provide this utility.
Explain your personal Troubleshooting Techniques. Include devtools and environments.
My first go-to in debugging/troubleshooting is console.logging. For example if I have a form where input values are set in local state, i’ll add a console log the state on every input. If I have anything async or connecting with a database, I’ll console log every response. I’ll often leave this console logs in until the very end so that if anything breaks along the way i already have the logs to work my way through a problem.
React devtools is very handy for looking at a component to make sure it has the props and state you expect it to have, especially if it is hooked up to redux via container. Redux devtools is extremely useful for tracking changes to redux state and seeing actions as they are dispatched.
