What's Redux Anyway?
Timothy McLane
iModules Software
Redux Overview
The What
The Why
The How
What is Redux?
- Predictable state container
- Inspired by Flux and Elm
- Framework agnostic
- Even Angular!
Why Redux?
-
Improve the dev cycle
-
Immediate feedback
-
No more constant reloading
Simplify the Flux Pattern
-
Actions, event emitters, multiple stores
-
Distilled for better understanding
Lots of free awesome
Like time travel!
And some more boring stuff...
- Easy bug reproduction
- Easy save/load of app state
- Testability
How Redux?
Three Principles of Redux
- A single source of truth
- Read-only state
- Pure functions
Three Important Parts of Redux
- Store
- Actions
- Reducers
Redux Store
getState()
subscribe()
dispatch()
Actions
- Describe an event
- Very simple
- A type property and a payload property
- Built using Action Creators
Action Creators
- Pure functions
- ctor for actions
- Resulting action is passed to dispatch()
Reducers
- Pure functions
- (state, action) => state
const changeState = (state, action) => {
switch(action.type){
case 'CHANGE_LETTERS':{
return {...state, letters: action.letters};
}
default:
return state;
}
}
connect()
- The magic behind react-redux
- Connects our dumb components to state
- Three helpers:
- mapStateToProps
- mapDispatchToProps
- mergeProps
const Component = ({name, handleOnClick}) => (
<div>
Hi! I'm {name}
<button onClick={handleOnClick}>Say Hello!</button>
</div>
)
const Component = ({name, handleOnClick}) => (
<div>
Hi! I'm {name}
<button onClick={handleOnClick}>Say Hello!</button>
</div>
)
const mapStateToProps = (stateProps, ownProps) => ({
name: stateProps.component.name
})
const Component = ({name, handleOnClick}) => (
<div>
Hi! I'm {name}
<button onClick={handleOnClick}>Say Hello!</button>
</div>
)
const mapStateToProps = (stateProps, ownProps) => ({
name: stateProps.component.name
})
const mapDispatchToProps = (dispatch, ownProps) => ({
handleOnClick: (id) => dispatch(sayHello())
})
const Component = ({name, handleOnClick}) => (
<div>
Hi! I'm {name}
<button onClick={handleOnClick}>Say Hello!</button>
</div>
)
const mapStateToProps = (stateProps, ownProps) => ({
name: stateProps.component.name
})
const mapDispatchToProps = (dispatch, ownProps) => ({
handleOnClick: (id) => dispatch(sayHello())
})
const mergeProps = (stateProps, dispatchProps, ownProps) => ({
...stateProps, ...dispatchProps, ...ownProps
})
const Component = ({name, handleOnClick}) => (
<div>
Hi! I'm {name}
<button onClick={handleOnClick}>Say Hello!</button>
</div>
)
const mapStateToProps = (stateProps, ownProps) => ({
name: stateProps.component.name
})
const mapDispatchToProps = (dispatch, ownProps) => ({
handleOnClick: (id) => dispatch(sayHello())
})
const mergeProps = (stateProps, dispatchProps, ownProps) => ({
...stateProps, ...dispatchProps, ...ownProps
})
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component)
Now we get state!
No handling of subscribe, or unsubscribe, or getState, or any other nonsense. The connect() function just does it all for us!
Demos
Let's get our demo on and have some
(ctional) programming!
fun
What I didn't have time to cover
- bindActionCreators()
- Middleware
- Thunk
- Logging
- Asynchronous methods
- And so much more...
More Resources
Pluralsight: Cory House
Dan Abramov's courses on Egghead.io
Redux documentation @ redux.js.org
What's Redux Anyway?
By tmclane
What's Redux Anyway?
- 494