Data Storage (Redux)
During Gatsby’s bootstrap & build phases, the state is stored and manipulated using the Redux library. The key purpose of using Redux in Gatsby internals is to centralize all of the state logic. Reviewing the Gatsby reducers and actions folders gives a comprehensive picture of what state manipulations are possible.
The namespaces in Gatsby’s Redux store are a great overview of the Gatsby internals, here are a few:
- Nodes - All data that’s added to Gatsby is modeled using nodes. Nodes are most commonly added by Source plugins such as
- Schema - GraphQL schema inferred from Nodes, available for querying by page and static queries.
- Pages - A
Mapof page paths to page objects. Objects made via Page Creation contain information needed to render a page such as component file path, page query and context.
- Components - A
Mapof component file paths to page objects.
- Static Query Components - A
Mapof any components detected with a static query.
- Jobs - Long-running and CPU-intensive processes, generally started as a side effect to a GraphQL query. Gatsby doesn’t finish its process until all jobs are ended.
The Gatsby Redux index file has two key exports,
emitter. Throughout the bootstrap and build phases,
store is used to get the current state and dispatch actions, while
emitter is used to register listeners for particular actions. The store is also made available to Gatsby users through the Node APIs.
Actions dispatched in the store cause state changes through the reducers and also trigger listeners registered for that action on a mitt
emitter. While the
subscribe Redux store method is typically used to connect a web framework like React, Gatsby only uses the
subscribe method to connect the
Gatsby actions have a similar journey through defining, exposing and dispatching. This section follows the createRedirect public action:
Reducer case - The redirects reducer will catch actions with a type
CREATE_REDIRECTand make the necessary state manipulation.
Side effect - An
emitterlistener is registered for the
Action creator - An action creator,
createRedirect, is defined in the public actions file. The action has a payload, the information needed to complete the action, and a type, the string that identifies this particular action.
Expose bound action creator -
createRedirectis one of the public actions made available to all of the Node APIs. A collection of public actions and the restricted actions available to the called API are bound to the Redux store dispatch. The bound action collection is then passed when calling the user’s API function.
By walking through an action scenario in detail, you can hopefully understand more about Gatsby’s internals using Redux.