webentwicklung-frage-antwort-db.com.de

Zuordnungseigenschaften, die in rea-redux angegeben werden sollen

Ich habe eine Komponente, die state verwendet, um dem Benutzer Daten zur Verfügung zu stellen. Zum Beispiel <div>this.state.variableInState</div>. Diese Komponente kann eine Methode auslösen (z. B. für die Aktion onClick). Ich verwende derzeit react-redux eine connect-Methode, um store zu props zuzuordnen. Gibt es eine Möglichkeit, wie ich nach dem Versand setState kann? 

// actions
export function executeAction() {
  return function (dispatch, getState) {
    dispatch({
      type: 'MY_ACTION',
      payload: axios.get('/some/url')
    });
  };
}
// reducer

export default function (state = {}, action) {
  switch (action.type) {
    case 'MY_ACTION_FULFILLED':
      return {...state, myVariable: action.payload.data}
  }
}
//component
class MyComponent extends Component {
  render() {
    (<div onClick={this.props.executeAction.bind(this)}>
      {this.state.variableInState}
      </div>)
  }

  someOtherMethod() {
    // I want to operate with state here, not with props
    // that's why my div gets state from this.state instead of this.props
    this.setState({variableInState: 'someValue'})
  }
}


export default connect((state, ownProperties) => {
  return {
    // So I want to change MyComponent.state.variableInState here
    // but this method updates MyComponent props only
    // What can I do?
    variableInProps: state.myVariable
  }
}, {executeAction})(MyComponent);
5
deathangel908

Was immer ich verstehe, Sie wollen nur die Requisiten der Komponente in den eigenen Zustand der Komponente umwandeln. In dieser Lebenszyklusmethode componentWillReceiveProps können Sie die Requisiten der Komponente immer in den Status der Komponente ändern.

//component
class MyComponent extends Component {
  componentWillReceiveProps(newProps){
     if(newProps.variableInProps != this.props.variableInProps){
         this.setState({variableInState: newProps.variableInProps })
     }
  }
  render() {
    (<div onClick={this.props.executeAction.bind(this)}>
      {this.state.variableInState}
      </div>)
  }

  someOtherMethod() {
    // I want to operate with state here, not with props
    // that's why my div gets state from this.state instead of this.props
    this.setState({variableInState: 'someValue'})
  }
}


export default connect((state, ownProperties) => {
  return {
    // So I want to change MyComponent.state.variableInState here
    // but this method updates MyComponent props only
    // What can I do?
    variableInProps: state.myVariable
  }
}, {executeAction})(MyComponent);

Die componentWillReceiveProps-Methode wird immer von reagieren ausgeführt, wenn immer neue Requisiten zur Komponente kommen. Dies ist der richtige Ort, um den Status Ihrer Komponente entsprechend Ihren Requisiten zu aktualisieren.

7
Prakash Sharma

Ich glaube, man soll den Zustand nicht direkt so ändern. Warum rufen Sie nicht eine andere Aktion auf, um das auszuführen, was Sie möchten? 

Der Zustand sollte bei der Verwendung von Redux unveränderlich sein. Sie sollten eine Aktion absenden. Ein Reducer sollte die Aktion und den aktuellen Status empfangen und ein neues Statusobjekt zurückgeben, das die gewünschten Änderungen enthält. Überprüfen Sie Folgendes: http://redux.js.org/docs/introduction/ ThreePrinciples.html # Änderungen werden mit-reinen Funktionen gemacht

2
kogmo

Es gibt auch static getDerivedStateFromProps:

static getDerivedStateFromProp(nextProps, prevState) {
  return {stateVar: nextProps.var} // this will propagate as component state
}
0
deathangel908

Sicher können Sie, onClick binden an eine Funktion wie folgt:

onClick={this.myfunction.bind(this)}

Dann definieren Sie diese Funktion als:

myfunction() {
    this.setState({ somestate: value });
    this.props.executeAction();
}

Hier ändert setState den nativen Komponentenzustand, und die aufrufende Aktion ändert den Redux-Status, wenn dies vom Reducer festgelegt wird. Diese Zustände sind unabhängig. 

Verbinden Sie den Wrapper (erstes Argument) mit dem Status zu Requisiten (Redux-Status zum Reagieren der Requisiten) und nicht zum Komponentenstatus. 

Eine gute Frage ist, warum Sie beides brauchen. Sicher, es gibt einige Beispiele, wo dies nützlich sein könnte ...

Wenn Sie einen Status benötigen, der global benötigt wird, verwenden Sie im Allgemeinen den Redux-Status (der leicht auf alle Komponenten angewendet werden kann) und für einige lokale Status den ursprünglichen Status. (Zum Beispiel, wenn Sie einige UI-Komponenten wie ein benutzerdefiniertes Kontrollkästchen erstellen) 

0
djra