blog 407

Discuss something you learned in class today or this week.

This week we learned how to do asynchronous API calls with thunk middleware. This is not the only option for this but is certainly a useful tool. Another popular option is Saga. The uses of thunk are described below and implementing it is actually quite easy. First, in your store.js import thunk from redux-thunk and import { createStore, applyMiddleware } from ‘redux’ and in our export default include applyMiddlware(thunk) like so: export default createStore(reducers, state, applyMiddleware(thunk)) . Next we will use the magic of dispatch in our redux/actions.js to do some asynchronous JS like an API call. The syntax looks like this:

export const fetchSomething = () => {
  return(dispatch) => {
    fetch('https://API-URL-HERE')
      .then(res => res.json())
      .then(response => {
        const action = {
          type: 'FETCH_SOMETHING',
          value: response.Results'
      }
      dispatch(action)
   })
  }
}

What is Redux Thunk used for?

Thunk is middleware used to pass asynchronous functions into Redux state. This can be particularly useful when performing async operations such as an API call to another server which will take some time. Action creators typically return an object, but Thunk allows us to return a function.

What is the difference between React Native and React?

React Native uses React but not React-DOM. It is used to develop cross-platform apps from a single code base. All of the normal facets of React remain intact while the biggest difference is how we render data. Rather than HTML elements such as div’s and h1’s we use React Native elements such as view and text.

Are you familiar with AMD/require.js or commonjs? What can they do for you?

I am not familiar. These tools provide encapsulation of dependencies which seems to be a common practice in some other programming languages. Encapsulation is essential to prevent conflicts and ease development. These tools can help us make sure our dependencies are loaded in the correct order and are all there and accounted for.

Explain your personal troubleshooting techniques. Include devtools and environments.

Its difficult to describe troubleshooting as a whole because each situation by nature has a different solution. Luckily we have many tools available to us as developers to help with troubleshooting. One of the most popular choices (for a reason) are the chrome dev tools. Between the console, the elements inspector, the react dev tools add-on, and tools like lighthouse you can gain major insights about bugs and/or performance. This is also a place where frequent git push can come in handy. If I am about to refactor some code, I always make sure to push so that I can reference or even revert back to old code.