将属性映射到 react-redux 中的状态 [英] Map properties to state in react-redux

问题描述

我有一个使用 state 向用户提供数据的组件.例如

this.state.variableInState

.这个组件可以调度一些方法(例如在 onClick 动作上).我目前正在使用 react-redux 一个 connect 方法将 store 映射到 props.有什么办法可以在派送后 setState 吗?

//动作导出函数 executeAction() {返回函数(调度，getState){派遣({类型:'MY_ACTION'，有效载荷:axios.get('/some/url')});};}//减速器导出默认函数(状态 = {}，动作){开关(动作.类型){案例MY_ACTION_FULFILLED":返回 {...state, myVariable: action.payload.data}}}//零件类 MyComponent 扩展组件 {使成为() {(<div onClick={this.props.executeAction.bind(this)}>{this.state.variableInState}</div>)}一些其他方法(){//我想在这里用 state 操作，而不是用 props//这就是为什么我的 div 从 this.state 而不是 this.props 获取状态this.setState({variableInState: 'someValue'})}}导出默认连接((状态，自己的属性)=> {返回 {//所以我想在这里改变 MyComponent.state.variableInState//但此方法仅更新 MyComponent 道具//我能做什么?variableInProps: state.myVariable}}, {executeAction})(MyComponent);

解决方案

不管我怎么理解，你要做的就是将组件的 props 转换为组件自己的状态.你总是可以像这样在组件中的 componentWillReceiveProps 生命周期方法中将组件的 props 更改为组件的状态.

//组件类 MyComponent 扩展组件 {componentWillReceiveProps(newProps){if(newProps.variableInProps != this.props.variableInProps){this.setState({variableInState: newProps.variableInProps })}}使成为() {(<div onClick={this.props.executeAction.bind(this)}>{this.state.variableInState}</div>)}一些其他方法(){//我想在这里用 state 操作，而不是用 props//这就是为什么我的 div 从 this.state 而不是 this.props 获取状态this.setState({variableInState: 'someValue'})}}导出默认连接((状态，自己的属性)=> {返回 {//所以我想在这里改变 MyComponent.state.variableInState//但此方法仅更新 MyComponent 道具//我能做什么?variableInProps: state.myVariable}}, {executeAction})(MyComponent);

componentWillReceiveProps 方法总是在有新道具进入组件时由 react 执行，因此这是根据道具更新组件状态的正确位置.

更新:

componentWillReceiveProps 已被弃用.因此，您可以使用 componentDidUpdate 方法代替此方法来执行此操作.componentDidUpdate 方法将之前的 props 和之前的状态作为参数.所以你可以检查 props 的变化，然后设置 state.

componentDidUpdate(prevProps) {if(prevProps.variableInProps !== this.props.variableInProps){this.setState({variableInState: this.props.variableInProps })}}

I have a component that uses state to provide data to user. For example <div>this.state.variableInState</div>. This component can dispatch some method (for example on onClick action). I'm currently using react-redux an connect method to map store to props. Is there a way I can setState after dispatch?

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

解决方案

Whatever i understand, all you want to do is to convert the component's props to component's own state. You can always change the component's props to component's state in the componentWillReceiveProps life cycle method in component like this.

//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 method is always executed by react whenever a new props is coming to component so this is the right place to update your component's state according to your props.

UPDATE :

The componentWillReceiveProps has been deprecated. So instead of this method you can use componentDidUpdate method to do this. componentDidUpdate method takes previous props and previous state as arguments. So you can check for the change in props and then set the state.

componentDidUpdate(prevProps) {
  if(prevProps.variableInProps !== this.props.variableInProps){
    this.setState({variableInState: this.props.variableInProps })
  }
}

这篇关于将属性映射到 react-redux 中的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！