That's where the real power is. Combining the 2. The pattern of use is DI even with a global store like Redux, making it not necessarily truly global. What Context does at a base is potentially use React Components as widely accessed stores. The simplest example usually involves abstracting a Parent Component's state/setState into state, and action functions wrapping a Context Provider.

To what degrees the stores should be laid out hierarchically mimicking the render tree is debatable. But often there is clear hierarchical ownership on large portions of the data. And often the question is what needs to be topmost and what belongs only within nested context. I think the opinion is still out on that. As you have suggested you could manage everything topmost.

Hooks make this really interesting in that they expose this idea of simple change management primitives to any Function component. So while it is still the Context API that allows the data to be shared, Hooks allow for re-usable patterns that can be used out of the box or compositionally built upon. So the Component that contains the provider has the ability through Hooks to do a really good impersonation of Redux(useReducer) or even MobX(useState + useMemo + useEffect). Does this replace those libraries? Probably not. But it is interesting how it gives a built in solution to choose to scale these solution with how you see fit. You have these tools at your disposal without much investment.

    function useMagicNumber(default) {
      const [magicNumber, setMagicNumber] = useState(default)

      return [magicNumber, setMagicNumber]
    }

    function ExampleA({}) => {
      const [magicNumber, setMagicNumber] = useMagicNumber(1)
      console.log(magicNumber) // 1
    }

    function ExampleB({}) => {
      const [magicNumber, setMagicNumber] = useMagicNumber(2)
      console.log(magicNumber) // 2
    }