it-roy-ru.com

Свойства карты для отображения в response-redux

У меня есть компонент, который использует state для предоставления данных пользователю. Например, <div>this.state.variableInState</div>. Этот компонент может отправлять какой-либо метод (например, для действия onClick). В настоящее время я использую react-redux и метод connect для сопоставления store с props. Есть ли способ, которым я могу setState после отправки?

// 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

Все, что я понимаю, все, что вы хотите сделать, это преобразовать реквизиты компонента в собственное состояние компонента. Вы всегда можете изменить реквизиты компонента в состояние компонента в методе жизненного цикла componentWillReceiveProps такого компонента.

//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);

Метод componentWillReceiveProps всегда выполняется по реакции, когда в компонент приходит новый реквизит, так что это подходящее место для обновления состояния вашего компонента в соответствии с вашими реквизитами.

7
Prakash Sharma

Я думаю, что вы не должны напрямую менять это состояние. почему бы не вызвать другое действие, чтобы выполнить то, что вы хотите? 

Состояние должно быть неизменным при использовании Redux. Вы должны отправить действие. Редуктор должен получить действие и текущее состояние и вернуть новый объект состояния, который включает в себя изменения, которые вы хотите внести . Проверьте это: http://redux.js.org/docs/introduction/ThreePrinciples. html # изменения сделаны с чистыми функциями

2
kogmo

Также есть static getDerivedStateFromProps:

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

Конечно, вы можете, onClick привязать к некоторой функции, например, так:

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

Затем определите эту функцию следующим образом:

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

Здесь setState изменяет собственное состояние компонента, а вызывающее действие изменит состояние избыточности, если это определено редуктором. Эти государства независимы. 

Соединение обертки (первый аргумент) отображает состояние на реквизиты (состояние редукса для реагирования на реквизиты), а не на состояние самого компонента. 

Хороший вопрос: зачем вам оба? Конечно, есть несколько примеров, где это может быть полезно ...

В общем, если вам нужно состояние, которое необходимо глобально, тогда используйте избыточное состояние (легко применимо ко всем компонентам), а для некоторых локальных состояний используйте собственное состояние реакции. (Например, когда вы создаете некоторые компоненты пользовательского интерфейса, такие как пользовательский флажок) 

0
djra