Add `namespace` option to `provideState`

[divmain]

When provideState is invoked like so:

provideState({
  namespace: "myNamespace",
  initialState: () => ({ value: "myValue" }),
  effects: { setVal: softUpdate((state, value) => ({ value })) }
});

All state values and effect functions will be silo'd within that namespace. Consuming from a child component would look like:

injectState(({ state, effects }) => (
  <div>
    {state.myNamespace.value}
    <button
      onClick={() => effects.myNamespace.setVal("newValue")}
    >
      Click me!
    </button>
  </div>
));

[jimthedev]

IMO this should be the default and you should have to opt in to using in to using the default global namespace.

[fingermark]

As mentioned on gitter, I just tried implementing a form using freactal and immediately used a namespacing pattern. It'd be nice if this was supported as an option.

[zebulonj]

Would the effects object exposed to effects defined on that name-spaced provider be the global effects object (inheriting from parents), or just the local scope? I'd venture that it should be the global effects object, or it would be impossible to call effects defined by parents (a fundamental benefit of the composition described in the documentation).

[divmain]

@zebulonj, I agree that it would have to be the global effects object. Doing the other would be harder, actually.

For those that are wondering, the difficulty with implementing this is not actually with the namespaced state or effects, it is in tracking the hierarchical dependencies of namespaced state-keys for computed values. I really want to see this feature land, but it's taking a backseat for a bit until all the kinks have been ironed out.