带有 Redux 设置的 TypeScript CRA答案

【问题标题】：TypeScript CRA with Redux setup带有 Redux 设置的 TypeScript CRA
【发布时间】：2020-03-10 10:28:28
【问题描述】：

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

索引.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;

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

这是一个具有显式类型的 reducer 示例：

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 中的类型错误。

【讨论】：