My Router has a useReducer
and the initialState has the error Argument of type 'StateInterface' is not assignable to parameter of type 'never'.
this only started happening when I use action.value
in the reducer in globalState.tsx
(Router.tsx)
import React, { useReducer } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Layout } from './components/layout';
import { Dispatch, Global, InitialState, Reducer } from './globalState';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';
const Router: React.FC = () => {
const [global, dispatch] = useReducer(Reducer, InitialState); //<==== Here is the error
return (
<Dispatch.Provider value={{ dispatch }}>
<Global.Provider value={{ global }}>
<BrowserRouter>
<Route
render={({ location }) => (
<Layout location={location}>
<Switch location={location}>
<Route exact path='/' component={Home} />
<Route component={NotFound} />
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</Global.Provider>
</Dispatch.Provider>
);
};
export { Router };
then global state looks like
(globalState.tsx)
import { createContext } from 'react';
interface StateInterface {
warningMessage: string;
warningShow: boolean;
}
interface ActionInterface {
type: string;
value: string | boolean;
}
const Dispatch = createContext({
dispatch: (action: ActionInterface) => {
//
},
});
const InitialState: StateInterface = {
warningMessage: '',
warningShow: false,
};
const Global = createContext({
global: InitialState,
});
const WARNING_TOGGLE = 'WARNING_TOGGLE';
const WARNING_MESSAGE = 'WARNING_MESSAGE';
const Reducer = (state: StateInterface, action: ActionInterface) => { // <= if I change ActionInterface to any the probem goes away, but my linter then fires of with no any allowed
switch (action.type) {
case 'WARNING_TOGGLE':
return {
...state,
warningShow: action.value, // <== If I remove `action.value and set this to `true` the error goes away
};
case 'WARNING_MESSAGE':
return {
...state,
warningMessage: action.value, // <== If I remove `action.value and set this to `some string` the error goes away
};
default:
return state;
}
};
export { Reducer, InitialState, Dispatch, Global, WARNING_TOGGLE, WARNING_MESSAGE };
and Home
(home.tsx)
import React, { useContext } from 'react';
import { Dispatch, Global, WARNING_MESSAGE, WARNING_TOGGLE} from '../globalState';
const Home: React.FC = () => {
const { global } = useContext(Global);
const { dispatch } = useContext(Dispatch);
const openWarning = () => {
dispatch({ type: WARNING_TOGGLE, value: true});
};
const closeWarning = () => {
dispatch({ type: WARNING_TOGGLE, value: false});
};
const warningMessageVerify = () => {
dispatch({ type: WARNING_MESSAGE, value: 'Please verify your email'});
};
const warningMessageOffine = () => {
dispatch({ type: WARNING_MESSAGE, value: 'You are now offline'});
};
return (
<section>
{global.warningShow && <div>Warning Open</div>}
{!global.warningShow && <div>Warning Closed</div>}
{global.warningMessage}
<br/>
<button onClick={openWarning}>Open Warning</button>
<button onClick={closeWarning}>Close Warning</button>
<button onClick={warningMessageVerify}>Verify Email</button>
<button onClick={warningMessageOffine}>Offline</button>
</section>
);
};
export { Home };
(globalState.tsx) const Reducer = (state: StateInterface, action: ActionInterface)
console.log(typeof InitialState);
returns Object