Hi Mike! Thanks for the question.

Before anything else, note the original article was written about ReactN 1.0. ReactN 2.0 is now released. The breaking changes are documented. There is just one breaking change, and it’s to reducers.

The flatter your global state, the more performant it will be, but a large state object is still perfectly valid and will work fine. You do not have to have a flat global state if it causes more problems than it solves.

You also have the option to split your large state into multiple smaller states. That’s entirely up to you. The documentation for Provider covers how to do this. This is useful if a global state is only used on one part of your application — such as a Demo global state for the Demo route, or a header global state only used by the Header component and its children.

If you are doing something like this, where your Header state is managed on a header property of the global state:

setGlobal({
  name: 'hello world',
  header: {
    color: 'red',
    size: '2em',
  },
  apis: {
    id1: {
      loading: false,
      response: null,
    },
    id2: {
      loading: false,
      response: null,
    },
  },
});
/*
// Class Component
<Header />
this.global.header.color === 'red';
// Function Component
<Header />
const [ header ] = useGlobal('header');
header.color === 'red';
*/

You may prefer a state shape like this, where the Header state has its own global state that does not conflict with other global states:

setGlobal({
  name: 'hello world',
});
// A Provider for the Header state:
const HeaderProvider = createProvider({
  color: 'red',
  size: '2em',
});
// A Provider for API calls:
const APIProvider = createProvider({
  id1: {
    loading: false,
    response: null,
  },
  id2: {
    loading: false,
    response: null,
  },
});
/*
// Class Component
<HeaderProvider>
  <Header />
</HeaderProvider>
this.global.color === 'red';
// Function Component
<Header />
const [ color ] = HeaderProvider.useGlobal('color');
*/

In contrast to Redux, ReactN tries to be open to whatever use case you find comfortable. Both of the above should work without problem. Use whatever makes sense for you and your project.