Researching patterns and components composing a flux architecture, and how they can be integrated current development processes.
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.
Hint: Flux is more of an architecture pattern for managing the flow of data throughout a react application, rather than a framework
One popular implementation / extension of this architecture is DataFlux.
Flux applications have three major parts: the dispatcher, the stores, and the views (React components).
Components at the top of the React Component hierarchy can often be called 'controller views' because they are usually the components responsible for retrieving data from the stores and passing them to children components.
When a controller-view receives an event from the store, it first requests the new data it needs via the stores' public getter methods. It then calls its own setState() or forceUpdate() methods, causing its render() method and the render() method of all its descendants to run.
The dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores and has no real intelligence of its own — it is a simple mechanism for distributing the actions to the stores. Each store registers itself and provides a callback. When an action creator provides the dispatcher with a new action, all stores in the application receive the action via the callbacks in the registry.
Functions basically to translate actions into state changes in the stores.
Stores contain the application state and logic. A store manages the application state for a particular domain within the application.
The dispatcher exposes a method that allows us to trigger a dispatch to the stores, and to include a payload of data, which we call an action.
- Redux does not have an explicit Dispatcher you must interact with
- Redux does not support many stores. Instead, there is just a single store with a single root reducing function. (As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree.)
Redux exposes the following functions:
subscribe, dispatch, and getState
When defining actions, action functions essentially serve to provide nice wrappers around dispatch