reagieren Requisiten nicht aktualisieren mit redux store

Benutzte ich immer reagieren-redux connect zu konfigurieren Requisiten, aber ich benötigen, um ein reagieren Component verwenden der lifecycle-Methoden. Ich bin zu bemerken, dass meine props, die ich packte aus dem store scheinen statisch zu sein, und Sie werden nicht aktualisiert, als die store-updates.

Code:

class AlertModal extends Component {

  title
  isOpen
  message

  componentDidMount() {
    const { store } = this.context
    const state = store.getState()
    console.log('state', state)
    console.log('store', store)
    this.unsubscribe = store.subscribe(() => this.forceUpdate())
    this.title = state.get('alertModal').get('alertModalTitle')
    this.isOpen = state.get('alertModal').get('isAlertModalOpen')
    this.message = state.get('alertModal').get('alertModalMessage')
    this.forceUpdate()
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  updateAlertModalMessage(message) {
    this.context.store.dispatch(updateAlertModalMessage(message))
  }
  updateAlertModalTitle(title) {
    this.context.store.dispatch(updateAlertModalTitle(title))
  }

  updateAlertModalIsOpen(isOpen) {
    this.context.store.dispatch(updateAlertModalIsOpen(isOpen))
  }

  render() {

    console.log('AlertModal rendered')
    console.log('AlertModal open', this.isOpen) <======= stays true when in store it is false

    return (
      <View

Wie richte ich title, isOpen, und message so reflektieren Sie das speichern von Werten zu allen Zeiten?

  • was ist die Notwendigkeit dieser.forceUpdate() ?
  • Schließen Sie einfach Ihre Komponente zu redux-Shop mit verbinden. Dann nutzen Sie mapStateToProps um die aktualisierten Requisiten.
  • Es ist eine Ansicht, die weiter unten im code, der verwendet onLayout um die Höhe der Ansicht. Dann ist es Stile, Inhalte, die über die Höhe. Deshalb muss ich anrufen forceUpdate nachdem es montiert hat -, weil der erste render nicht über die Höhe.
InformationsquelleAutor BeniaminoBaggins | 2017-05-20
  1. 9

    Es sollte so etwas wie dieses. In Ihrer Bestätigungs-Komponente:

    const mapStateToProps = (state) => {
  return { modalActive: state.confirmation.modalActive };
}

export default connect(mapStateToProps)(Confirmation);

    In Ihrem reducer index-Datei ist, sollte so etwas wie dieses:

    const rootReducer = combineReducers({
  confirmation: ConfirmationReducer
});

    Ich glaube, Sie haben Ihre eigenen reducer Datei namens ConfirmationReducer hier. Es sollte so etwas wie dieses.

    import { ON_CONFIRM } from '../actions';

const INITIAL_STATE = {modalActive: true};
export default function(state = INITIAL_STATE, action) {
  console.log(action);
  switch (action.type) {
    case ON_CONFIRM:
      return { ...state, modalActive: action.payload };
  }

  return state;
}

    Stellen Sie sicher, Sie schreiben Ihre eigenen action-creator erstellen Sie eine Aktion mit der oben genannten Art und der entsprechenden payload vom Typ boolean.

    Schließlich sollten Sie in der Lage sein, um Zugriff auf die Eigenschaft aus dem store innerhalb Ihrer Bestätigung Komponente wie folgt:

    {this.props.modalActive}

    Haben Sie nicht gepostet gesamten code, so macht es sehr schwierig, eine Lösung für das genaue Szenario. Hoffe, das hilft. Happy coding!

    • Ja, der Schlüssel war, den ich brauchte, um mit dem reagieren-redux connect die ich verlassen hatte. Die Requisiten werden nicht aktualisiert, mit der redux-store, wenn Sie nicht connected. Danke.
    • Ja, natürlich, das ist, wo die Verbindung Helfer oder HOC kommt. Auf jeden Fall bin ich froh, dass Sie es gemacht !
    • Für mein Problem war es, nicht ahnend, dass dieser Staat wurde aufgeteilt in die jeweiligen übergangsstücke. Danke @RavindraRanwala
    InformationsquelleAutor Ravindra Ranwala
  2. 3

    Für mich das problem war, dass ich Sie diese.Requisiten.myObject um eine variable, die war nicht tief geklont, also habe ich es behoben indem 

    let prev = Object.assign({}, this.props.searchData)

    Was ich Tat 

    let prev = this.props.searchData

    Also ich war verstörend die ganze Seite.Scheint ruhig noob auf meinem Teil.

    InformationsquelleAutor Black Mamba
  3. 1

    dies kann helfen, Sie

    componentWillReceiveProps(nextProps) {

 console.log();
 this.setState({searchData : nextProps.searchData})
}
    InformationsquelleAutor D V Yogesh
Schreibe einen Kommentar