Машинописный текст с вызванным реагирующим-редуксом mapStateToProps, но компонент не перерисовал - PullRequest
0 голосов
/ 26 мая 2018

много тем на эту тему, но они почти все о том, что состояние как-то мутировало, что, на мой взгляд, не мой случай.Итак, у меня есть состояние, которое разделяется между двумя компонентами.

export interface ImageStoreState {
    readonly name : string;
}

Редуктор,

export function imageActionReducer(state: ImageStoreState, action:ImageActions): ImageStoreState {
  // Set up initial states
  if (state === undefined)
  {
    state = {
      name: ""
    }
  }

  console.log("original state", state);
  switch (action.type) {
      case getType(imageActions.saveImageMeta):
        console.log("SaveImageMeta Reducer.");
        return { ...state, 
          name: action.payload.name 
        };
    }

  console.error("No matching reducer.");
  return state;
}

Контейнер,

export function mapStateToProps(state: ImageStoreState) : IAddImageControlProps {
  const { name } = state;
  console.log("Add image control container, mapStateToProps", state);
  return {
      imageChosen: name
  }
}

export function mapDispatchToProps() {
  return {
      // 
  };
}

export const AddImageControlContainer 
  = connect<IAddImageControlProps, {}, IAddImageControlProps, ImageStoreState>(mapStateToProps, mapDispatchToProps)(AddImageControl);

Компонент представления,

export interface IAddImageControlProps {
  imageChosen?: string;
  // onImageAdded?: (im: ImageFile) => any;
}

export class AddImageControl extends React.Component<IAddImageControlProps, {}> {
  constructor(props : IAddImageControlProps) {
      super(props);
  }

  public componentWillReceiveProps(nextProps: IAddImageControlProps) {
    console.log('componentWillReceiveProps', nextProps);
  }

  public render() : JSX.Element {
    const { imageChosen } = this.props;

    let isEnabled = false;
    if (imageChosen !== undefined)
    {
      isEnabled = true;
      console.log(imageChosen);
    }
    console.log("Should enbale:" + isEnabled);

    return (
      <section>
        <Button type="button" color="success" disabled={!isEnabled}>Add it!</Button>
      </section>
    );
  }
}

Я использую инструменты редукционного разработчика, чтобы видеть, что состояния меняются, enter image description here

Но линии

console.log('componentWillReceiveProps', nextProps);

console.log("Should enbale:" + isEnabled);

Никогда не звоните!

Спасибо всем заранее!Я задавался этим вопросом уже несколько дней.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...