source, • The provider of a universal state to your entire app Actions • Centralized set of functions for manipulating data in the store • All actions return a plain object describing what happened
source, • The provider of a universal state to your entire app Actions • Centralized set of functions for manipulating data in the store • All actions return a plain object describing what happened Reducers • Called with two arguments from the store: the current state tree and an action • Outlines the shape of an initial state
instances of shared data • React and Backbone lifecycles exist independently from each other • Listeners for Backbone ‘change’ events were scattered throughout app to trigger re-renders
instances of shared data • React and Backbone lifecycles exist independently from each other • Listeners for Backbone ‘change’ events were scattered throughout app to trigger re-renders Props and onChange functions were passed down the entire component tree
instances of shared data • React and Backbone lifecycles exist independently from each other • Listeners for Backbone ‘change’ events were scattered throughout app to trigger re-renders Props and onChange functions were passed down the entire component tree • Bug fixing is hard when tracking through deep layers of nesting
instances of shared data • React and Backbone lifecycles exist independently from each other • Listeners for Backbone ‘change’ events were scattered throughout app to trigger re-renders Props and onChange functions were passed down the entire component tree • Bug fixing is hard when tracking through deep layers of nesting Data loss and views becoming out-of-sync is possible when components unmount
instances of shared data • React and Backbone lifecycles exist independently from each other • Listeners for Backbone ‘change’ events were scattered throughout app to trigger re-renders Props and onChange functions were passed down the entire component tree • Bug fixing is hard when tracking through deep layers of nesting Data loss and views becoming out-of-sync is possible when components unmount • Rather than conditionally mounting components, we’d use jQuery to hide them
components • A consistent source for editable data • But also can contain other information, like saved status or client errors Components that access centralized store re-render automatically when data changes • This operation can be memoized for highly performant update cycles
components • A consistent source for editable data • But also can contain other information, like saved status or client errors Components that access centralized store re-render automatically when data changes • This operation can be memoized for highly performant update cycles Functions for mutating and saving data are consolidated to a centralized set of actions • Makes it easy to jump into a new codebase and see what’s possible
State is shared between components that don’t have a parent/child relationship • State changes are reflected outside the component where they are triggered, or are paired with asynchronous functions
State is shared between components that don’t have a parent/child relationship • State changes are reflected outside the component where they are triggered, or are paired with asynchronous functions • Following how your state changes is opaque, and a step-through/undo history is necessary to understand it
State is shared between components that don’t have a parent/child relationship • State changes are reflected outside the component where they are triggered, or are paired with asynchronous functions • Following how your state changes is opaque, and a step-through/undo history is necessary to understand it • Props are passed down the component tree liberally, including through places they aren’t used