web-dev-qa-db-fra.com

réagir les accessoires ne mettant pas à jour avec Redux Store

J'ai toujours utilisé react-redux connect pour configurer les accessoires, mais je dois utiliser une réaction Component pour utiliser les méthodes du cycle de vie. Je remarque que mes accessoires que je récupère dans le magasin semblent être statiques et qu'ils ne sont pas mis à jour au fur et à mesure que le magasin se met à jour.

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

Comment puis-je configurer title, isOpen et message afin qu'ils reflètent les valeurs du magasin à tout moment?

reactjsreact-nativereduxreact-redux
5
BeniaminoBaggins

Cela devrait être quelque chose comme ça. Dans votre composant de confirmation:

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

export default connect(mapStateToProps)(Confirmation);

Dans votre fichier d’index réducteur, is devrait ressembler à ceci:

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

Je crois que vous avez ici votre propre fichier de réduction appelé ConfirmationReducer. Cela devrait être quelque chose comme ça.

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;
}

Assurez-vous d'écrire votre propre créateur d'action pour créer une action avec le type ci-dessus et la charge utile pertinente de type booléen. 

Enfin, vous devriez pouvoir accéder à la propriété à partir du magasin situé à l'intérieur de votre composant de confirmation, comme suit:

{this.props.modalActive}

Vous n'avez pas posté de code complet, il est donc très difficile de donner une solution au scénario exact. J'espère que cela t'aides. Bonne codage!

6
Ravindra Ranwala

cela peut vous aider

componentWillReceiveProps(nextProps) {

 console.log();
 this.setState({searchData : nextProps.searchData})
}
1
D V Yogesh

Pour moi, le problème était que j'attribuais this.props.myObject à une variable qui n'était pas clonée en profondeur. Je l'ai donc corrigé en utilisant 

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

Ce que je faisais 

let prev = this.props.searchData

Donc, je dérangeais toute la page. Cela me semble être un noob silencieux.

1
Black Mamba