Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useGlobal should match useReducer when passed a function

See original GitHub issue

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

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.


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


useGlobal(reducer) returns LocalReducer


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 };
      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>


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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

CharlesStovercommented, Feb 17, 2019

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>;
CharlesStovercommented, Feb 18, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Should I useState or useReducer? - Kent C. Dodds
Two built-in React hooks that handle state, which one should you use? ... function useUndo(initialPresent) { const [past, setPast] = React.
Read more >
How to use React useReducer hook like a pro - Devtrium
For now, I'll just say that this reducer is a function that will handle the logic of how the state should be updated....
Read more >
Why don't you need to pass the state to the reducer with react ...
The dispatch() function is a child function returned by the useReducer() . This gives it scoped access to the reducer that you passed...
Read more >
React: Creating a 'Redux-like' Global State with the ... - Medium
The useReducer hook accepts two arguments, a reducer function, and an initial value for state. A reducer function must be able to accept...
Read more >
React useReducer Hook: Manage App State Better - Copycat
Dispatch in React is simply a function that takes an instruction about what to do, then passes that instruction to the reducer as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found