| layout | permalink |
|---|---|
page |
/redux-intro/ |
- Applications are becoming more complex
- GUI applications have many different points of interaction, leading to different sources of state updates
- Web applications have to reconcile state between client and server
- Asynchronous nature of JavaScript and server-side calls introduces additional points of failure
- Server side rendering, caching, and distributed data add more complexity
Redux is a predictable state container for JavaScript apps.
- A framework for managing state
- Streamlines state interactions using a common pattern
- Removes two-way interaction in favor of a uni-directional data flow
- A single source of truth
- State is read-only
- State is updated using pure functions
FIXME: replace this diagram with a Rangle version
- The sole mechanism for inducing changes in state
- Application dispatches actions whenever an event happens
- E.g., button clicked, page has finished loading, AJAX call has returned data
- Actions contain:
- Something that identifies the change
- Any additional information needed to update the state
- The method by which state is actually changed
- Takes the "before" state and the action and returns the "after" state
- Follows the same data flow as the general programming concept of a "reducer"
- Where the entire application state exists
- An application should only have one store
- In larger applications, the store will have several parts
- Partitioning state is a key architectural decision
- Redux is available via NPM
npm install redux
- There is also a package that provides easy interoperability between Redux and React called
react-reduxnpm install react-redux- Makes integration easier but is not absolutely necessary
- Redux DevTools is a debugging tool that allows you to:
- Visualize your application's current state
- Move forward and backwards throughout your state (time travelling!)
- Available for Chrome, Firefox and Electron and other environments