带Redux设置的TypeScript CRA

Question

我正在尝试使用Create React App和Redux快速设置，我显然遗漏了一些东西……

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { store } from './store/store'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)
serviceWorker.unregister();

商店

import { createStore } from "redux";
import { rootReducer } from "../reducers/index";
const store = createStore(rootReducer);
//                           ^ error
export { store };

我得到的错误是

No overload matches this call.
  Overload 1 of 2, '(reducer: Reducer<{ articles: never[]; }, UserAction>, enhancer?: StoreEnhancer<unknown, unknown> | undefined): Store<{ articles: never[]; }, UserAction>', gave the following error.
    Argument of type '(state: { articles: never[]; } | undefined, action: UserAction) => { articles: any[]; }' is not assignable to parameter of type 'Reducer<{ articles: never[]; }, UserAction>'.
      Type '{ articles: any[]; }' is not assignable to type '{ articles: never[]; }'.
        Types of property 'articles' are incompatible.
          Type 'any[]' is not assignable to type 'never[]'.
            Type 'any' is not assignable to type 'never'.
  Overload 2 of 2, '(reducer: Reducer<{ articles: never[]; }, UserAction>, preloadedState?: { articles: never[]; } | undefined, enhancer?: StoreEnhancer<unknown, {}> | undefined): Store<{ articles: never[]; }, UserAction>', gave the following error.
    Argument of type '(state: { articles: never[]; } | undefined, action: UserAction) => { articles: any[]; }' is n

和减速机

const initialState = {
    articles: []
  };

  export interface UserAction {
    type: string;
    payload: any;
}

  const rootReducer = (state = initialState, action: UserAction) => {
    switch (action.type) {
        case 'ADD_ARTICLE': {
          return {
            ...state,
            articles: [action.payload, ...state.articles],
          };
        }
        default:
          return state;
      }
  }

  export { rootReducer };

应用程序

import React from "react";
import { rootReducer } from "./reducers/index";

function App() {
  const addArticle = () => {
    rootReducer({type: 'ADD_ARTICLE', payload: 'my new article'}) // this isnt right!
  };
  return <button onClick={addArticle}>Add Article</button>;
}

export default App;

Answer 1

下面是一个具有显式类型的缩减程序的示例：

interface IArticles {
  articles: string[];
}

const initialState: IArticles = {
  articles: []
};

export interface UserAction {
  type: string;
  payload: string;
}

const rootReducer = (state = initialState, action: UserAction): IArticles => {
  switch (action.type) {
    case "ADD_ARTICLE": {
      return {
        articles: [action.payload, ...state.articles]
      };
    }
    default:
      return state;
  }
};

之前我已经经历过和你一样的问题，因为reducer中的类型是错误的。