Please enable JavaScript.
Coggle requires JavaScript to display documents.
Getting Started with Redux (Reducers (Pure functions, Describes how the…
Getting Started with Redux
Actions
A plain JavaScript object
A minimal representation of a change to application state
Has a type property
Not undefined
Preferably a string
Serializability
Dispatched by components
Any other properties as necessary
Reducers
Pure functions
Describes how the next state is calculated
Takes the current state and an action as inputs
Returns the new state as output
Returns the current state for unknown actions
Returns initial state if the current state is undefined
Multiple reducers can handle the same action
npm packages
Expect
DeepFreeze
ReactRedux
Store
Redux.createStore(reducer)
Calls store.dispatch() with a dummy action to initialize the state
store.getState()
store.dispatch(action)
Calculates the new state and fires all listeners
store.subscribe(callback)
Pushes a new listener to the listeners array
Returns an unsubscribe handle
React + Redux
Dumb components
Receives state and dispatch callbacks as props
No business logic
Only concerned with updating the UI
Render function
Registered as a listener with store.subscribe()
Passes state down as props
Using object spread
Avoiding mutations
Arrays
Use Array.prototype.concat() and Array.prototype.slice()
Use ES6 array spread operator
Objects
Use ES6 Object.assign() on a new object
Use ES7 object spread operator
Reducer composition
Different reducers handle different parts of the state tree
Single top-level reducer that calls other reducers
combineReducers()
Can be called as many times in an app as needed
Can be used to generate the top-level reducer using a state and reducer mapping object
ES6: object literal shorthand notation to match state keys and reducers
New reducers can be added to application using the reducer composition pattern
State
Immutable
A JavaScript object
Minimal representation of the data in the application
Singleton
Presentation and container components
Usage
There could be components that don't fit in either category
Presentation components should be extracted first
Container components should then be extracted if there's a lot of data passed down the hierarchy
Presentation components
Don't specify any data or behavior
Only concerned with rendering and receiving input
Receives data and behavior as props
Container components
Passes down data and behavior as props to presentation components
Intermediate container components can reduce the number of props passing down the component tree
Component lifecycle methods are used to subscribe to store changes and update the component hierarchy
Self-sufficient components in terms of data and behavior
Passing the store down
Using a global variable
Not scalable
Harder to mock when testing
Via props
Cumbersome
Using React's context API
The API is liable to change
Breaks React's explicit top-down data flow pattern
Using React-Redux
A Provider component can be imported
Action creators
Functions that create action objects upon receiving necessary data as arguments
Can be called from components as well as tests
Can be used to document actions that a component can dispatch
Helps maintain state that the action may need
Generating containers
Using connect() from React-Redux
Can be called with state-prop and dispatch-prop mapping functions
Both functions receive the container's own props as the second argument
A mapper object can be passed if the argument are the same for the prop and action creator
Returned function is called with a presentational component to generate a container component
Passing no parameters to connect() would create a container that doesn't subscribe to the store and receives dispatch() as a prop