Redux 如何设置初始 state

Question

I'm working on a project which contains React, Redux and TypeScript.

I can't figure out how to set the initial state because of the type restrictions of TypeScript. Does someone know how to set the types?

I've compressed everything in one file for simplicity, and will be divided in to separate files later on.

state/index.ts

import { Notes } from '@material-ui/icons'
import { createStore, combineReducers } from 'redux'

// Types
type Note = {
    title: string
    description: string
}

type NoteState = {
    notes: Array<Note>
}

type NoteAction = {
    type: string
    payload: Note
}

type CountState = {
    count: number
}

type CountAction = {
    type: string
    payload: number
}

// Actions
const ADD_NOTE = 'ADD_NOTE'
const addNote: (note: Note) => NoteAction = (n) => ({ type: ADD_NOTE, payload: n })

const INCREMENT = 'INCREMENT'
const increment: (n: number) => CountAction = (n) => ({ type: INCREMENT, payload: n + 1 })

// Reducer
const noteReducer: (s: NoteState, a: NoteAction) => NoteState = (s = { notes: [] }, a) => {
    switch (a.type) {
        case ADD_NOTE:
            return { notes: [...s.notes, a.payload] }
        default:
            return s
    }
}

const countReducer: (s: CountState, a: CountAction) => CountState = (s = { count: 0 }, a) => {
    switch (a.type) {
        case INCREMENT:
            return { count: a.payload }
        default:
            return s
    }
}

const rootReducer = combineReducers({
    notes: noteReducer,
    counter: countReducer,
})

type RootState = ReturnType<typeof rootReducer>

// Store
const state = createStore(rootReducer({ notes: [], counter: 0 }, null))

Error When initializing the state object, the IDE gives the following error:

No overload matches this call.
  Overload 1 of 2, '(reducer: Reducer<unknown, Action<any>>, enhancer?: StoreEnhancer<unknown, unknown> | undefined): Store<unknown, Action<any>>', gave the following error.
    Argument of type 'CombinedState<{ notes: never; counter: never; }>' is not assignable to parameter of type 'Reducer<unknown, Action<any>>'.
      Type 'CombinedState<{ notes: never; counter: never; }>' provides no match for the signature '(state: unknown, action: Action<any>): unknown'.
  Overload 2 of 2, '(reducer: Reducer<unknown, Action<any>>, preloadedState?: {} | undefined, enhancer?: StoreEnhancer<unknown, {}> | undefined): Store<unknown, Action<any>>', gave the following error.
    Argument of type 'CombinedState<{ notes: never; counter: never; }>' is not assignable to parameter of type 'Reducer<unknown, Action<any>>'.ts(2769)

I need to set the App State in the createStore function. Because later, there will be a function retrieving the App State from local storage and pass it through the createStore method. But I want to make this work first. Does anyone have experience with Redux + TypeScript?

Answer 1

Looks like you put the wrong arguments for createStore function. It would take rootReducer as the 1st argument, initial state as the 2nd argument but you set the result of the call your rootReducer as the 1st argument. Just change it right as following:

interface AppState {
  notes: NoteState;
  counter: CountState;
}

const rootReducer = combineReducers<AppState>({
  notes: noteReducer,
  counter: countReducer
});

const state = createStore(rootReducer, {
  notes: { notes: [] },
  counter: {
    count: 0
  }
});

One more thing to notice, the 1st state parameter is likely undefined so you have to set it can be undefined :

const noteReducer: (s: NoteState | undefined, a: NoteAction) => NoteState = (

NOTE: Here is the codesandbox for you to mess around: https://codesandbox.io/s/inspiring-sound-0lh92?file=/src/store.ts:1178-1276