useGlobal should match useReducer when passed a function

Following the classic example presented in this article, but with typescript:

https://gist.githubusercontent.com/CharlesStover/285f95bba12cd9468276d766a87a3568/raw/c386149729ff7d17c16318563be6613baf933448/global-reducer.js

I am playing a little fast and loose with types here. I am unsure what to do with the LocalReducer type returned in this scenario.

Expected

useGlobal(reducer) returns types compatiable with [state, dispatch]

Actual

useGlobal(reducer) returns LocalReducer

Code

import { useGlobal } from "reactn";

const initialState = { count: 0 };
function reducer(state: any, action: { type: string }) {
  switch (action.type) {
    case "reset":
      return initialState;
    case "add":
      return { count: state.count + 1 };
    case "subtract":
      return { count: state.count - +1 };
    default:
      return state;
  }
}

function Counter({ initialCount = 0 }) {
  const [state, dispatch] = useGlobal(reducer);
  return (
    <>
      Count: {state.count}
      {/* and can dispatch certain events here */}
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

Error

Type 'LocalReducer' is not an array type.ts(2461)
const dispatch: any

[CharlesStover]

Great report! This current behavior is by design. If you used two reducers in the same component, you’d have redundant global state variables. I strongly will consider updating it for 1.0 as a breaking change to better match the React Hooks useReducer.

If you want to continue using 0.2 in the meantime, the structure is like so:

function MyComponent() {
  const [ state ] = useGlobal();
  const dispatch = useGlobal(reducer);
  return <button onClick={() => { dispatch({ type: 'reset' }); }>Click</button>;
}

[CharlesStover]

There’s no need for the subscription property list, because your component will subscribe any time you access that property. So where you are displaying Count: {state.count} is causing a subscription on count. If your view is dependent on a property, it will be subscribed to that property auto-magically.

I believe I have the iteration property working so that both const dispatch = useGlobal(reducer) and const [ state, dispatch ] = useGlobal(reducer) work. It is passing unit tests, but I worry about cross-browser compatibility.

I’ll do some manual testing to make sure current apps reliant on ReactN won’t break with this change. If not, I’ll ship this feature in 1.0 this weekend.