Incorrect TypeScript declaration
vhenzl opened this issue · 7 comments
TypeScript type declaration created in #27 is incorrect. It doesn't allow combining of multiple reducers without an initial state.
Both examples below are taken from tests (with some modifications).
const initialState = {A: 0, B: 0};
type State = typeof initialState;
// this one is OK
const reducer1 = reduceReducer(initialState, (state: State, action: Action) => ({
...state,
A: state.A + 1
}));
// this one fails because first argument is expected to be initial state
const reducer2 = reduceReducer(
(state: State, action: Action) => ({...state, A: state.A + 2}),
(state: State, action: Action) => ({...state, B: state.B * 2}),
);The second example fails with the following error:
Argument of type '(state: { A: number; B: number; }, action: Action) => { B: number; A: number; }' is not assignable to parameter of type 'Reducer<(state: { A: number; B: number; }, action: Action) => { A: number; B: number; }>'.
Types of parameters 'state' and 'state' are incompatible.
Type '(state: { A: number; B: number; }, action: Action) => { A: number; B: number; }' is missing the following properties from type '{ A: number; B: number; }': A, B
I'm facing a similar issue. Looking at the description here: https://redux.js.org/recipes/structuring-reducers/beyond-combinereducers I got the idea that as long as the 1st reducer gives me the inital State I should be fine.
Should I refactor my code to have the initial state set in the reduceReducer or is this a bug?
Doing something like this could work?:
import { Reducer } from 'redux';
export default function reduceReducer<S>(
initialState: S | null,
...reducers: Array<Reducer<S>>
): Reducer<S>;
Even with that fix, I still have to define a lot of stuff as State | undefined.
const crossSliceReducer = (state: State | undefined)=> {
return state;
};
const combinedReducers = combineReducers<State>({
mouseCords: mouseCords,
character: character,
map: map,
render: render
});
const gameApp = reduceReducer<State | undefined>(null, combinedReducers, crossSliceReducer);
Or have the crossSliceReducer as "Reducer"
const crossSliceReducer: Reducer = (state: State) => {
return state;
};
const combinedReducers = combineReducers<State>({
mouseCords: mouseCords,
character: character,
map: map,
render: render
});
const hexgameApp = reduceReducer(null, combinedReducers, crossSliceReducer);
export default hexgameApp;
My TS is not that strong so I might be missing something tho.
@vhenzl You could bypass this atm by doing:
const reducer2 = reduceReducer(
null as unknown as State,
(state: State, action: Action) => ({...state, A: state.A + 2}),
(state: State, action: Action) => ({...state, B: state.B * 2}),
);
You would be passing null as the first argument, but telling TS that it's actually a State
Hi @tuuling, thanks for trying to be helpful. Your workaround above would work but that would require me to modify tens of files in my project.
The way to go until types are fixed here is to write your own declaration in your project and overwrite typings from this package. You could create, for example, reduce-reducers.d.ts with content like this:
declare module 'reduce-reducers' {
import { Reducer } from "redux";
function reduceReducers<S>(initialState: S | null, ...reducers: Reducer<S>[]): Reducer<S>;
function reduceReducers<S>(...reducers: Reducer<S>[]): Reducer<S>;
export default reduceReducers;
}Things to note:
- It has to utilise functions overloading to support both cases w/o
initialState. - The example assumes only standard reducer signature, i.e.
(State, Action) => State, and doesn't support extra arguments in reducers. - Action is of type
AnyAction. Probably, it should have a generic type variable for action (reduceReducers<S, A>(...)). And it might require usinginferas incombineReducers. But that's currently beyond of my TS knowledge.
Ping to @RumyantsevMichael who created the type declarations in #27.
Hi all. It seems it's my fault. I'll try to figure out in a few days.