Bringing Back Redux
What is Redux?
What is Redux?
- Open source JavaScript library for managing application state
What is Redux?
- Open source JavaScript library for managing application state
- Created by Dan Abramov and Andrew Clark
What is Redux?
- Open source JavaScript library for managing application state
- Created by Dan Abramov and Andrew Clark
- Partners well with React
What is Redux?
- Open source JavaScript library for managing application state
- Created by Dan Abramov and Andrew Clark
- Partners well with React
- Created in response to growing application state complexity
Redux Pattern Overview
State
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Workout',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
Actions
{ type: 'ADD_TODO', text: 'Go for walk' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
Reducers
function visibilityFilter(state = 'SHOW_ALL', action) {
if (action.type === 'SET_VISIBILITY_FILTER') {
return action.filter
} else {
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }])
case 'TOGGLE_TODO':
return state.map(
(todo, index) =>
action.index === index
? { text: todo.text, completed: !todo.completed }
: todo
)
default:
return state
}
}
function todoApp(state = {}, action) {
return {
todos: todos(state.todos, action),
visibilityFilter: visibilityFilter(state.visibilityFilter, action)
}
}
Three Fundamentals of Redux
Single Source of Truth
State is Read-Only
Changes Use Pure Functions
So... what about Redux?
Redux: Actions
- payloads of information
- only source of information for the store
- sent using store.dispatch()
// example declaration of action
const ADD_TODO = 'ADD_TODO'
// example of action being 'dispatched'
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
Redux: ActionCreators
- returns actions
// example declaration of action
const ADD_TODO = 'ADD_TODO'
// example of action creator
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
// the result of action creator is passed into dispatch
dispatch(addTodo(text)) // const boundAddTodo = text => dispatch(addTodo(text))
Redux: Reducers
- pure function that takes previous state, action, and returns resulting state
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
]
default:
return state
}
}
Redux: Store
- brings actions (what happened) together with reducers (how to handle what happened)
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
Data Flow and Lifecycle
- store.dispatch(action)
- Redux store calls the reducer function
- Root reducer combines multiple reducers
- Redux store saves the state tree
Resources
- https://redux.js.org/
- awesome-redux
- Egghead videos for Redux
- https://redux.js.org/docs/introduction/Ecosystem.html
Redux
By Andrew Schutt
Redux
internal work presentation for helping co-workers get introduced to Redux
- 960