Definition: An action in Flux is a plain JavaScript object that contains information about an event that has occurred, typically consisting of a type field and any additional data required to process that event.
• Type: A string constant that identifies the action. For example, 'ADD_TODO' or 'FETCH_USER'.
• Payload: Additional data needed to perform the action. For example, in a 'ADD_TODO' action, the payload might include the text of the new to-do item.
Actions are created by action creators, which are functions that construct and return action objects. For instance:
Definition: The dispatcher is a central hub that manages all data flow in a Flux application. It receives actions and dispatches them to registered callbacks provided by stores.
• Register: Stores register with the dispatcher and provide a callback to handle actions.
• Dispatch: The dispatcher invokes the registered callbacks with the action.
The dispatcher ensures that every registered callback is invoked, giving each store the opportunity to respond to the action.
Stores contain the application state and business logic. They listen for actions dispatched by the dispatcher and update their state accordingly. Stores also emit change events when their state changes, allowing views to react and update.
• State: The data that the store manages.
• Listeners: Functions (often views) that are notified when the store's state changes.
• Reducers: Functions that specify how the store's state should change in response to actions.
Stores register with the dispatcher and define how they handle different actions:
Views are React components that listen to changes in the stores. They re-render in response to changes in the store's state and can generate new actions based on user interactions.
• State: Views maintain local state derived from the store's state.
• Lifecycle Methods: Methods like componentDidMount and componentWillUnmount are used to add and remove listeners to the store.
• Event Handlers: Methods that dispatch actions in response to user interactions.
Views listen to the store and update when the store's state changes:
By following this structure, Flux ensures a unidirectional data flow, which simplifies the process of reasoning about state changes and helps in maintaining the application over time.