I think I thunk of a good idea

The ‘thunk’ package was introduced this week. Thunk introduces a very useful solution to asynchronous functions for React. Especially since react doesn’t have one. By default, everything in React is synchronous and follows the typical event loop. But by adding Thunk to a project, asynchronous middleware can be called into the mix. This make fetch request and other similar functions possible without slowing down the rest of the application.

Previously I’ve spoken about some of today’s topics. But I will recap them briefly. Actions are functions that can be called by components and their containers in order to affect the global state. Each action returns the reducer required for the specific action.

The reducer is where that action call can specify a specific action type for a state and carry out the change. They typically copy and update the state instead of mutating it directly. Through reducers, you can update state with a boolean, string, object, or array as its value.

The ‘single source of truth’ in Redux is the ‘store’. What it means is that all the data and reducers to control the data are all accessible from one single location. That’s the ‘store’. The state and reducers are combined together and then the store itself is passed into the router or app. Then all components can gain access to the store and manipulate it through the proper channels.

Redux has many components that make it feel a little intimidating at first. But through the recent class project, I finally got a good feel for them and how they all work together. Here is a quick breakdown and recap from bottom up. It all starts with a state and it’s initial values. Along side that are the reducers that can access and manipulate those states. The store combines them together into the ‘single source of truth’. The actions control how to use the reducers to complete specific functions from the components. The containers access the store in order to map the state and dispatch the actions to the appropriate components. So only the specified states and actions will be available to the specified component. Then finally is the component. It takes props as it’s argument in order to gain access to anything that passed down through the container. The same state can be accessed and manipulated by multiple components as long as the chain of operation is followed for each one.