REDUX

App

App

"We could use a series of callbacks to pass the needed shared data up four components, over one, down three and VOILA! The data is easily shared between two components"

- You

Think of Redux as a big grocery "store" for your app. Whenever a component needs some data, you just "connect" it to the store

Far off component(s) needs to know about an update? No problem. The update is sent to the store and any other connected components can see the change and make the necessary changes if needs be

Redux

Redux allows us to easily share data between components that need to know about it

• State Management Library
• State should be treated as immutable
• Not React specific
• Is not black magic
• Is not always needed

You Might Not Need Redux

state = {
  name: 'Jonathan',
  pianos: {
    has: true,
    count: 3
  }
}

Vocab

• Redux - state management library
• React-Redux - state management library that is React specific
• Store - state for entire app
• Reducer - function that takes in state and an action and updates our state
• Action Types - constants that dictate how the state is updated
• Provider - Component that takes in a store prop and allows all children of it to receive access to the state tree
• mapStateToProps - function that does exactly that, takes our state from the store and attaches it to props on the component
• connect - function that connects our component to the state tree

Let's
Sling
Some

Code