global_state_without_redux.js

//=====================================================================

// store.js

const initialState = {
    data: {}
}

import React, { createContext, useReducer } from 'react'
import appReducer from './reducers/appReducer.js'

const Store = ({ children }) => {
    const [state, dispatch] = useReducer(appReducer, initialState)
    return (
        <Context.Provider value={[state, dispatch]}>
            { children }
        </Context.Provider>
    )
}

export const Context = createContext(initialState)
export default Store

//=====================================================================

/// reducers/appReducer.js

const Reducer = (state, action) => {
    switch(action.type) {
        case 'SOME_ACTION':
            return {
                ...state,
                data: action.payload
            };
        break;
        default:
            return state
    }
}

export default Reducer

//=====================================================================

// index.js

import Store from './store'

ReactDOM.render(
        <Store>
            <App />
        </Store>
    , document.getElementById('root')
);


//=====================================================================

// App.js (OR ANY OTHER NESTED CHILD COMPONENT)

import { useContext } from 'react'
import { Context } from './store'

let [state, dispatch] = useContext(Context)

// Get global state
console.log('global application state :' + state.data)

// Set global state
dispatch({
  type: 'SOME_ACTION',
  payload: {users: {id: 1, name: 'something'}}
})

Good to know, thank you 👍

Thank you 👍