Global reducers do not work in TypeScript 4.

[fny]

Type inference for reducers appears to be broken with TypeScript v4 and reactn 2.2.7.

For some reason, useDispatch(reducerName) results in the following error:

// ERROR: Type of property 'increment' circularly references itself in mapped type 'DispatcherMap<State, Reducers>'.ts(2615)

Below is an example.

// global.d.ts
import 'reactn';
import { Dispatch } from 'react';

declare module 'reactn/default' {
  export interface Reducers {
    increment: (global: State, dispatch: Dispatch, i: number) => Pick<State, 'x'>
  }

  export interface State {
    x: number
  }
}

// App.tsx
import React, { setGlobal, useGlobal, useDispatch, addReducer } from 'reactn'

interface ProviderState {
  x: number
}

const INITIAL_STATE: ProviderState = {
  x: 0
}

setGlobal(INITIAL_STATE)

addReducer('increment', (global, dispatch, i = 0) => {
  return { x: global.x + i }
})

export default function () {
    const increment = useDispatch('increment') // <--- ERROR
    const [ x, ] = useGlobal('x')

    return (
      <div>
        <p>{}</p>
        <button onClick={() => increment(1) }>Increment</button>
      </div>
    )
}

---

Here is a second, related issue. The types for Provider.useDispatch does not accept strings even though the global version does.

import React, { createProvider } from 'reactn'

interface ProviderState {
  x: number
}

const INITIAL_STATE: ProviderState = {
  x: 0
}

const Provider = createProvider(INITIAL_STATE)

Provider.addReducer('increment', (state, dispatch, x = 0) => ({ 
  x: x + 1
})

export default function () {
    const increment = Provider.useDispatch('increment') // <---- ERROR
    const [ x, ] = Provider.useGlobal('x')

    return (
      <div>
        <p>{}</p>
        <button onClick={() => increment() }>Increment</button>
      </div>
    )
}

ERROR

No overload matches this call.
  Overload 1 of 4, '(reducer: Reducer<ProviderState, Reducers, any[], NewGlobalState<ProviderState>>): Dispatcher<ProviderState, any[]>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'Reducer<ProviderState, Reducers, any[], NewGlobalState<ProviderState>>'.
  Overload 2 of 4, '(reducer: never): Dispatcher<ProviderState, never>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'never'.

[quisido]

This is accurate. I am not aware of a solution. The reducers do circularly reference themselves, so TypeScript is not wrong to say that; but I feel it is wrong to fail to compile, since it worked in earlier versions and works at runtime.

In the meantime, you should be able to migrate your global reducers from addReducer() to the local useDispatch, which does not inject other global reducers. It's not as convenient as global reducers, but it unblocks this error and is likely a better practice for strong typing.

[fny]

migrate your global reducers from addReducer() to the local useDispatch

I'm not sure what you mean by this, can you clarify?

[quisido]

Right now you are using addReducer, which requires TypeScript import your global.d.ts file, which is where the infinite recursion exists.

// index.ts
Provider.addReducer('increment', (previousState, dispatch, i) => ({ 
  x: previousState.x + i
});

// component.ts
const increment = useDispatch('increment');
increment(1); // global.x = global.x + 1

This would be how you can refactor it to be defined locally instead of on the global ReactN object:

// reducers/increment.ts
// Here, the dispatch prop is unused, and as long as the typeof reducers
//   is empty in your global.d.ts, there is no recursive definition.
const increment = (previousState, _dispatch, i = 1) => ({
  x: previousState.x + i
});

// component.ts
import incrementReducer from 'reducers/increment';

const increment = useDispatch(incrementReducer);
increment(1); // global.x = global.x + 1

You can also replace this with a property reducer to simplify it further:

// reducers/increment
const increment = (previous, i) => previous + i;

// component.ts
import increment from 'reducers/increment';

const increment = useDispatch(increment, 'x');
increment(1); // global.x = global.x + 1

The idea is to get rid of addReducer, which is what TypeScript 4 does not support. You can do this by defining these reducer functions separately, importing them, and passing them to useDispatch instead of strings. Hope this helps.

[monteiz]

@CharlesStover The approach you described here is totally legit, and I am using it successfully even with Server Side Rendering, thanks.

addReducer does not work with Server Side Rendering, so my suggestion is to mark it as deprecated, and update the documentation describing this approach.