Scribd
Upload
2K views

Redux Cheat Sheet

This document provides a summary of key concepts and components in Redux, including state, actions, reducers, middleware, the store, and how they work together. It defines the types for each component, such as the State type, Action type, Reducer function type, and Store type. It also includes descriptions and examples of core Redux concepts like single source of truth, immutable state updates with pure functions, and combining reducers.

Uploaded by

Vikram Bhaskaran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Redux Cheat Sheet

This document provides a summary of key concepts and components in Redux, including state, actions, reducers, middleware, the store, and how they work together. It defines the types for each component, such as the State type, Action type, Reducer function type, and Store type. It also includes descriptions and examples of core Redux concepts like single source of truth, immutable state updates with pure functions, and combining reducers.

Uploaded by

Vikram Bhaskaran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Redux Cheat Sheet (3.2.

1)
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers,
applyMiddleware, bindActionCreators } from 'redux'
const greetingReducer = (state='' , action) => {
switch (action.type) {
case 'SAY_HELLO': return 'Hello '
case 'SAY_GOODBYE': return 'Goodbye '
}
return state
}
const nameReducer = (state='John', action) => {
switch (action.type) {
case 'CHANGE_NAME': return 'Joel'
}
return state
}
const actionLogger = ({dispatch, getState}) =>
(next) => (action) =>
{ console.log(action); return next(action) }
const reducers = combineReducers({
greeting: greetingReducer,
name: nameReducer
})
const middleware = applyMiddleware(actionLogger)
const store = createStore(
reducers,
{ greeting: '(Roll over me) '},
middleware
)
const changeName = () => {return { type: 'CHANGE_NAME' }}
const hello = () => {return { type: 'SAY_HELLO' }}
const goodbye = () => {return { type: 'SAY_GOODBYE' }}
const Hello = (props) =>
<div
onMouseOver={props.hello}
onMouseOut={props.goodbye}
onClick={props.changeName}>
{props.greeting}{props.name}
</div>
const render = () => {
ReactDOM.render(
<Hello
greeting={store.getState().greeting}
name={store.getState().name}
{...bindActionCreators({changeName, hello, goodbye},

store.dispatch)}
/>,
document.getElementById('root')
)
}
render()
store.subscribe(render)

Welcome to the egghead.io Redux cheat sheat! On your left you


will find a full-fledged Redux application with a React.js front-end
(React is not required).

function reducer( State ,

Action

Redux's Three Principles


Single source of truth
State is read-only
Changes are made with pure functions

) State

Takes the previous state and an action, and returns the next state.

Splitting your app into multiple reducers (greetingsReducer, nameReducer) allows


for a clean separation of concerns when modifying your application's state.

Glossary
State
type State = any

function middleware( {Dispatch,

getState}

) next action

Receives Stores dispatch and getState functions as named arguments, and


returns a function. That function will be given the next middlewares dispatch method,
and is expected to return a function of action calling next(action) with a potentially
different argument, or at a different time, or maybe not calling it at all. The last
middleware in the chain will receive the real stores dispatch method as the next
parameter, thus ending the chain.

combineReducers(

{Reducers}

Action
type Action = {

type:

String ,

payload: any

Reducer
type Reducer<State, Action> = ( State ,

Action ) => State

Dispatching Functions
type BaseDispatch = ( Action ) => Action

) Function

Combines multiple reducers into a single reducing function with each reducer as a
key/value pair. Can then be passed to createStore().

type Dispatch = ( Action | AsyncAction ) => any

Action Creator
type ActionCreator = ( ANY ) => Action | AsyncAction

applyMiddleware(

...middleWares

) Function

Async Action

Extends Redux with custom functionality by wrapping the stores dispatch method.

createStore( Reducer ,

?initialState

?enhancer

) Store

Creates a Redux store that holds the complete state tree of your app.
There should only be a single store in your app.

type AsyncAction = any

Middleware
type MiddlewareAPI = {

dispatch:

Dispatch ,

getState:

() => State }

type Middleware = ( MiddlewareAPI ) => ( Dispatch ) => Dispatch

Store
store = { ... }

type Store =

Brings together your application's state and has the following responsibilities:

Allows access to state via getState();


Allows state to be updated via dispatch(action);
Registers listeners via subscribe(listener);
Handles unregistering of listeners via the function returned by subscribe(listener).

dispatch( Action | AsyncAction ) => any,


getState() => State,
subscribe( () => VOID ) => () => void,
replaceReducer( Reducer ) => void
}

action = { type: String, ...payload: any }


Holds action payloads in plain javascript objects. Must have a type property that
indicates the performed action, typically be defined as string constants. All other
properties are the action's payload.

Store Creator
type StoreCreator = ( Reducer ,

?initialState ,

?enhancer ) => Store

Store Enhancer
type StoreEnhancer = ( StoreCreator ) => StoreCreator

function actionCreator( ?any ) Action|AsyncAction


Creates an action with optional payload and bound dispatch.

bindActionCreators( ActionCreators ,

Dispatch

) Fn | Obj

Turns an object whose values are action creators, into an object with the same keys,
but with every action creator wrapped into a dispatch call so they may be invoked
directly.

You might also like