Welcome to the egghead.io Redux cheat sheat!

On your left you Redux's Three Principles

will find a full-fledged Redux application with a React.js front-end
(React is not required). Single source of truth
Redux Cheat Sheet (3.2.1) State is read-only
Changes are made with pure functions
import React from 'react' function reducer( State , Action ) State
import ReactDOM from 'react-dom' Takes the previous state and an action, and returns the next state.
import { createStore, combineReducers,
applyMiddleware, bindActionCreators } from 'redux' Glossary
const greetingReducer = (state='' , action) => { Splitting your app into multiple reducers (greetingsReducer, nameReducer) allows
for a clean separation of concerns when modifying your application's state. State
switch (action.type) {
case 'SAY_HELLO': return 'Hello ' type State = any
case 'SAY_GOODBYE': return 'Goodbye '
} Action
function middleware( {Dispatch, getState} ) next action
return state
type Action = { type: String , payload: any }
} Receives Stores dispatch and getState functions as named arguments, and
returns a function. That function will be given the next middlewares dispatch method,
const nameReducer = (state='John', action) => { and is expected to return a function of action calling next(action) with a potentially Reducer
different argument, or at a different time, or maybe not calling it at all. The last
switch (action.type) { type Reducer<State, Action> = ( State , Action ) => State
middleware in the chain will receive the real stores dispatch method as the next
case 'CHANGE_NAME': return 'Joel' parameter, thus ending the chain.
} Dispatching Functions
return state
} type BaseDispatch = ( Action ) => Action
combineReducers( {Reducers} ) Function
Combines multiple reducers into a single reducing function with each reducer as a type Dispatch = ( Action | AsyncAction ) => any
const actionLogger = ({dispatch, getState}) =>
key/value pair. Can then be passed to createStore().
(next) => (action) => Action Creator
{ console.log(action); return next(action) }
type ActionCreator = ( ANY ) => Action | AsyncAction
const reducers = combineReducers({
greeting: greetingReducer, applyMiddleware( ...middleWares ) Function Async Action
name: nameReducer Extends Redux with custom functionality by wrapping the stores dispatch method. type AsyncAction = any
})
Middleware
const middleware = applyMiddleware(actionLogger)
createStore( Reducer , ?initialState , ?enhancer ) Store
const store = createStore( type MiddlewareAPI = { dispatch: Dispatch , getState: () => State }
reducers, Creates a Redux store that holds the complete state tree of your app.
type Middleware = ( MiddlewareAPI ) => ( Dispatch ) => Dispatch
{ greeting: '(Roll over me) '}, There should only be a single store in your app.
middleware
)
Store
store = { ... } type Store =
const changeName = () => {return { type: 'CHANGE_NAME' }} Brings together your application's state and has the following responsibilities:
const hello = () => {return { type: 'SAY_HELLO' }} {
const goodbye = () => {return { type: 'SAY_GOODBYE' }} Allows access to state via getState(); dispatch( Action | AsyncAction ) => any,
Allows state to be updated via dispatch(action);
const Hello = (props) => Registers listeners via subscribe(listener); getState() => State,
<div Handles unregistering of listeners via the function returned by sub-
scribe(listener). subscribe( () => VOID ) => () => void,
onMouseOver={props.hello}
onMouseOut={props.goodbye} replaceReducer( Reducer ) => void
onClick={props.changeName}> }
{props.greeting}{props.name}
</div> action = { type: String, ...payload: any }
Store Creator
Holds action payloads in plain javascript objects. Must have a type property that
const render = () => { indicates the performed action, typically be defined as string constants. All other type StoreCreator = ( Reducer , ?initialState , ?enhancer ) => Store
ReactDOM.render( properties are the action's payload.
<Hello Store Enhancer
greeting={store.getState().greeting}
type StoreEnhancer = ( StoreCreator ) => StoreCreator
name={store.getState().name}
{...bindActionCreators({changeName, hello, goodbye}, function actionCreator( ?any ) Action|AsyncAction
store.dispatch)} Creates an action with optional payload and bound dispatch.
/>,
document.getElementById('root')
)
} bindActionCreators( ActionCreators , Dispatch ) Fn | Obj
Turns an object whose values are action creators, into an object with the same keys,
render() but with every action creator wrapped into a dispatch call so they may be invoked
store.subscribe(render) directly.