Please enable JavaScript.
Coggle requires JavaScript to display documents.
Building React Applications with Idiomatic Redux (React Router (Params…
Building React Applications with Idiomatic Redux
Initial state
Can be passed as the second argument to createStore()
Only use the second argument to reload persisted state
Initial state should be co-located with the reducers to aid in testing and future modification
npm packages
node-uuid
lodash
Using local storage for persistence
State should be serializable
Deserialize when reading from local storage and serialize when writing to local storage
Use Lodash's throttle function to limit store updates by time
Use the createStore() and subscribe() methods to load and persist state
Exporting a store configuration function from its own module allows many store instances to be created
React Router
Router
Root component of the route configuration elements
The history prop takes a browserHistory object to disable hash history
Route
A route configuration
Props
path
component
Params
Defined as /:param in the path prop
Parentheses denote optional routes
Param values are available under the params props of the state component
Link
Props
to
activeStyle
withRouter
An HOF that injects route params to a wrapped component
Used to avoid passing params down the component tree
The root DOM element could be moved to its own module
Selectors
Used to isolate the state implementation from the components
Co-located with the relevant reducers
Named exports from the reducer module
Prefixed with get by convention
ES6
Object return values from arrow functions should be wrapped in parentheses
Object method notation
Namespace import
Treating state as a database
State object indexed by item IDs
byId reducer that returns a lookup table
allIds reducer that manages the list of IDs
Selectors may compute data needed for the UI by using the individual reducers
Logging on dispatch
Wrap the store.dispatch() with a custom function
Use console.group() with action type
Add fallback for browsers that don't support console.group()
Add check for production build
Fetching data
Use component lifecycle methods to initiate network calls
Use a wrapper class to define the hooks if the components are auto-generated
Dispatch an action to the store on receiving data
Asynchronous action creators
Action creators can be composed by passing fetched data onto other action creators
store.dispatch() can be overridden to handle asynchronous action creators