Свойство y не существует для типа DefaultRootState - PullRequest
Новая
       29

Свойство y не существует для типа DefaultRootState

0 голосов
/ 04 августа 2020

У меня есть файл src/reducers/index.tsx, в который я выводю все свои редукторы: 

import counterReducer from '../reducers/counter';
import loggedReducer from '../reducers/isLogged';
import {combineReducers} from 'redux';

const allReducers = combineReducers({
   counter: counterReducer,
   isLogged: loggedReducer,
});

export default allReducers;

Затем в моем src/index.tsx: 

import {Provider} from 'react-redux';

const store = createStore(allReducers);

ReactDOM.render(
   <React.Fragment>
      <Provider store={store}>
        <App />
      </Provider>,
   document.getElementById('root'),
);

И, наконец, в моем src/app.tsx I иметь: 

import {useSelector} from 'react-redux';

const App = () => {
   const counter = useSelector(state => state.counter);
   return (
      <h1>counter {counter}</h1>
   );
};

Ошибка сообщается в state.counter части useSelector: 

> Property 'counter' does not exist on type 'DefaultRootState'.ts(2339)

Похоже, что хранилище никогда не было создано?

1 Ответ

1 голос
/ 04 августа 2020

Это действительно была проблема TypeScript. Я изменил несколько вещей, чтобы мое приложение скомпилировалось, а также работало с Redux. Я знаю, что мы не должны публиковать ссылки, но https://github.com/piotrwitek/react-redux-typescript-guide это отличный ресурс! На основе приведенных здесь примеров я исправил свои проблемы:

Я изменил useSelector, чтобы определить тип в состояние, это разрешило исходную ошибку. 

import {RootState} from 'typesafe-actions';
const counter = useSelector((state: RootState) => state.counter);

Но что такое RootState? RootState - это настраиваемый тип, созданный в файле src/store/types.d.ts: 

import {StateType, ActionType} from 'typesafe-actions';

declare module 'typesafe-actions' {
  export type Store = StateType<typeof import('./index').default>;

  export type RootState = StateType<typeof import('./root-reducer').default>;

  export type RootAction = ActionType<typeof import('./root-action').default>;

  interface Types {
    RootAction: RootAction;
  }
}
...