【问题标题】:React Redux Typescript error with AnyAction when implementing Redux-Persist实现 Redux-Persist 时使用 AnyAction 反应 Redux Typescript 错误
【发布时间】:2020-04-05 22:07:24
【问题描述】:

我正在尝试在我的 React 项目中实现 redux-persist。 Redux 工作正常,但是当我实现 redux-persist 时,我开始收到此错误:

   Types of property 'dispatch' are incompatible.
     Type 'Dispatch<{ type: string; payload: any; }>' is not assignable to type 'Dispatch<AnyAction>'.
       Type 'AnyAction' is not assignable to type '{ type: string; payload: any; }'.  TS2345
     19 | const store = createStore(persistedReducer)
     20 |
   > 21 | let persistor = persistStore(store)
        |                              ^
     22 |
     23 | ReactDOM.render(
     24 |   <Provider store={store}>

我假设它与我的 reducer 以及我在 Action 中定义属性的方式有关,但我无法弄清楚。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import {createStore} from 'redux'
import reducer from './redux/reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { PersistGate } from 'redux-persist/integration/react';

const persistConfig = {
  key: 'root',
  storage
}

const persistedReducer = persistReducer(persistConfig, reducer)

const store = createStore(persistedReducer)

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root'));

serviceWorker.unregister();

reducer.ts

const defaultState = {
  user: {}
}

export default function reducer(
  state = defaultState,
  {type, payload} : {type: string; payload: any}
): any {
  switch(type){
    case 'SET_USER_STATE':
      return {
        ...state,
        user: {
          username:payload
        }
      }
  }
  return state
}

actions.tx

export const setUserState = (payload: any) => {
  return { type: 'SET_USER_STATE', payload}
}

【问题讨论】:

    标签: javascript reactjs typescript redux react-redux


    【解决方案1】:

    解决了问题。

    线

    {type, payload} : {type: string; payload: any}
    

    需要改成

    {type, payload} : AnyAction
    

    【讨论】:

    • 这确实修复了错误消息(谢谢),但是您的有效负载会失去类型安全性。因此系统将例如不检查 action.payload.name 是否存在,这有点违反 typescript 的原则。这在我看来很像,但不确定问题实际发生在哪个 redux 组件上
    • 此线程中讨论了错误:github.com/rt2zz/redux-persist/pull/1085
    猜你喜欢
    • 2020-04-27
    • 2021-06-03
    • 2020-07-12
    • 2017-11-15
    • 2021-02-28
    • 2018-03-10
    • 2018-08-28
    • 1970-01-01
    • 2018-06-06
    相关资源
    最近更新 更多