Typescript throws this compile error:
Argument of type '(state: string, action: Action<string>) => string' is not assignable to parameter of type 'Reducer<string, Action<string>>'.
Types of parameters 'state' and 'state' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'. TS2345
and my function looks like this:
function todos(state: string, action: Action<string>)
What I can't understand is, first, the state parameter is not nullable yet the compiler says it's nullable. Second, the error message contradicts itself by saying in the first line that the function's type is (state: string, action: Action<string>) => string (which is correct) whereas the third line is saying that the first parameter is string | undefined!
I'm just beginning learning typescript and react-redux so I'm really confused.
EDIT:
Further, I tried calling the function passing undefined as first argument but the compiler complains that it's not nullable as expected, yet complain later that it's nullable!
EDIT 2
I forgot to say that I'm using the todos function in calling the createStore function from redux like this: createStore(todos).
The full code is this:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Action, createStore} from 'redux'
import {Provider} from "react-redux";
function todos(state: string, action: Action<string>) {
return state
}
let store = createStore(todos); // PROBLEM HERE
let app = (
<Provider store={store}>
<App/>
</Provider>
)
ReactDOM.render(app, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
Also, I'm aware that combineReducers is normally used and that state shouldn't be a string, but I'm asking this question purely out of curiosity (being a beginner in typescript) because I know that there are obvious workarounds.
I also tried using string[] as the type of the state but same error is thrown except that it's string[] | undefined at this time.
EDIT 3:
I realized that if I add a default value to the state, e.g. function todos(state: string = "", action: Action), the error will be gone. But why is this? Isn't it redundant given that state is already a required, non-nullable parameter? In Swift and Kotlin, the error will be thrown only if you call the todos function with a nil state argument, but you don't need to provide a default value in the definition of the parameter. So why is this the case in typescript? Is this by design?
todosas a parameter to something, but all you've shown here is the signature oftodosand not the signature of the function. Ideally you should work to provide a minimal reproducible example, preferably one where you can link to an online IDE like StackBlitz. The easier you make it for others to reproduce your error and modify your code, the likelier it will be for you to get a satisfactory answer. Good luck!