Redux

An app is composed typically, of a UI and State.

Most bugs are caused because there is a problem with a state. To manage the state better, Redux offers to have a State Tree. That means to have a group of states instead to have states spread in all components.

Benefits of the State tree

• Shared cache

• Predictable State Changes

• Improved developer tooling

• Pure functions

• Server Rendering

The store has four parts

• The state

• Get the state (how do we get the state)

• Listen (listen if there is a change in the state)

• Update the state (Update the state on the UI)

function createStore( ) {
  let state 
  let listeners = []

   const getState = ()=> state
   
   const subscribe = (listener) => {
       listeners.push(listener)
       return () => {
            listeners = listeners.filter((l)=> l !== listener)
      }
   } 
   return { 
       getState,
       subscribe
   }
}

const store = createStore()
const unsubscribe =  store.subscribe(() => {

})
unsubscribe 

In order to represent these events, we’ll use plain old JavaScript objects but re-brand them as “actions”.

const action = {
  type: 'LIKE_TWEET',
  id: 950788310443724800,
  uid: 'tylermcginnis'
}

Note that actions must have a type property to specify, well, the “type” of action which is occurring.