Компонент реквизит недоступен с реагировать-редукса - PullRequest
Новая
       5

Компонент реквизит недоступен с реагировать-редукса

0 голосов
/ 24 сентября 2018

Контекст : Приложение Simple React Native использует Redux для управления сложностью.

Версии :

  • typcript v3.0.3
  • реактивная версия v0.56.0
  • redux v4.0.0
  • @ types / Reaction-redux v6.0.9
  • @ types / redux v3.6.0

Проблема : Мой главный компонент JSX не видит свойства (ошибки включены в комментарии).

Первый файл: 

//app.tsx
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <MainRedux ownProp="as"/> //[1]: Type '{ ownProp: string; }' is not assignable to type 'Readonly<AllProps>'. Property 'appPermissions' is missing in type '{ ownProp: string; }'.
      </Provider>
    );
  }
}

и второй файл: 

//MainRedux.tsx
export interface ApplicationState { //originally in another file
  appPermissions: AppPermissionsState;
  //...
}

type StateProps = ApplicationState; //alias appPermissions is in the Application State

interface DispatchProps {
  getPermissions: typeof getPermissions;
  //...
}

interface OwnProps {
  ownProp: string;
}

type AllProps = StateProps & DispatchProps & OwnProps;

export class MainRedux extends React.Component<AllProps> {
  constructor(props: AllProps) {
    super(props);
    props.getPermissions(); //[2]: TypeError: undefined is not a function (evaluating 'props.getPermissions()')
  }
  //...
} //class

//...
const mapStateToProps: MapStateToProps<
  StateProps,
  OwnProps,
  ApplicationState
> = (state: ApplicationState, ownProps: OwnProps): StateProps => {
  return state;
};

const mapDispatchToProps: MapDispatchToPropsFunction<
  DispatchProps,
  OwnProps
> = (dispatch: Dispatch<AnyAction>, ownProps: OwnProps): DispatchProps => ({
  getPermissions: bindActionCreators(getPermissions, dispatch)
  //...
});

export default connect<StateProps, DispatchProps, OwnProps, ApplicationState>(
  mapStateToProps,
  mapDispatchToProps
)(MainRedux);

while, [1] - ошибка времени компиляции, а [2] - ошибка времени выполнения.

Может кто-нибудь сказать мне, что не так?Заранее спасибо.

Редактировать: Я помещаю некоторую отладочную информацию в mapStateToProps и mapDispatchToProps, но, похоже, connect не вызывает их.Я могу пойти дальше и предположить, что даже connect не вызывается.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

@ Комментарий MattMcCutchen ударил меня.В конце концов, функция connect возвращает декорированный класс, который больше не является тем же классом компонента, например, MyComponent, но совершенно другим, например, let ConnectedMyCommponent = connect(...), который затем можно импортировать как import {ConnectedMyComponent} from '.\...' в файл с родительским элементом.Тег Provider, например <Provider><ConnectedMyComponent></Provider>.

Моя ошибка заключалась в том, что при рефакторинге кода я не менял способ импорта с import {MainRedux} from './...' на import MainRedux from './...'.

Я быдайте простой совет для всех, кто переходит от ванильного реактивного к избыточному реактивному: избавьтесь от каждого ключевого слова export в определенном вами классе компонента, поскольку connect создаст для вас новый класс.В противном случае вы тратите много времени, пытаясь понять часто непонятные сообщения об ошибках.

0 голосов
/ 24 сентября 2018

Похоже, что отображение состояния в реквизит

В качестве теста вы можете поместить это в функцию MapStateToProps: 

const mapStateToProps: MapStateToProps<StateProps,OwnProps,ApplicationState> = 
(state: ApplicationState, ownProps: OwnProps): StateProps => {
  return {test : "hello"}
};

и посмотреть, видите ли вы test в вашемconsole.log(this.props) в вашем componentDidMount()

Если это так, вам нужно отобразить ваш объект так: 

return {
 propkey1 : state.propkey1,
 propkey2 : state.propkey2
 .... etc
}

Хотя довольно сложно определить без кодовой базы.

...