REDUX
App
THE MOON
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
state = {
name: 'Jonathan',
pianos: {
has: true,
count: 3
}
}
Piano.js
Me.js
4
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
REDUX
By jonmcd
REDUX
- 143