Just two things:

Context API - createContext() to create a store that holds the context (the state).

to create a store that holds the context (the state). React Hooks - useReducer() hooked to a reducer function designed to access the store to manage the state.

1. ⚛️ Creating a reducer

We create a reducer function, this function works with conjunction with React’s own hook: useReducer() .

Assuming we’re familiar with Redux already, in the code snippet above there’s a reducer function that takes the state and an action as arguments designed for accessing and managing the global state of the application.

2. 🗄️ Creating a store

To create a global state we need a central store. The store is a higher-order component (HOC) which holds the context (the state).

On line 11 we pass an initial default state object and the reducer function to React’s useReducer() as arguments then deconstruct its values. The state value points to the state object and the dispatch method is the reducer function that manages the state.

as arguments then deconstruct its values. The value points to the state object and the method is the reducer function that manages the state. On line 13 we pass the state and dispatch method to the context.

On line 19, the context is created using React’s createContext() hook. Passing a default state here isn't necessary since it was set by the provider on line 13, but we do it anyway for better code auto-completion in the IDE.

To use the store and access its global state from anywhere in our application we need to wrap it around our main App component. This way, all the children of the App component will have access to the store and its values.

💡 Connecting to the sate

For accessing the global state and the dispatch method from within a child component we use the useContext() hook.

For example in the Blog component: