将属性映射到react-redux中的状态

时间:2017-03-31 17:06:18

标签: javascript reactjs redux react-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);

4 个答案:

答案 0 :(得分:8)

无论我理解什么,你想要做的就是将组件的道具转换为组件自己的状态。您可以随时在组件的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方法总是通过新的道具进入组件时做出反应,因此这是根据道具更新组件状态的正确位置。

更新:

已弃用componentWillReceiveProps。因此,您可以使用componentDidUpdate方法来代替此方法。 componentDidUpdate方法将先前的props和先前的状态作为参数。因此,您可以检查道具的变化,然后设置状态。

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

答案 1 :(得分:2)

我认为你不应该直接改变这样的状态。为什么不叫另一个动作来执行你想要的?

使用Redux时,状态应该是不可变的。你应该派遣一个行动。 Reducer应该接收操作和当前状态,并返回包含您要进行的更改的新状态对象。 检查一下:http://redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions

答案 2 :(得分:0)

当然可以,onClick绑定到某个函数,如下所示:

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

然后将此myfuntion定义为:

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

这里setState改变了本机组件状态,如果由reducer定义,则调用action将改变redux状态。这些州是独立的。

连接包装器(第一个参数)将状态映射到props(redux状态以反应道具)而不是组件状态本身。

好问题是为什么你需要两者,确定有一些例子,这可能是有用的......

通常,如果您需要全局需要的状态,则使用redux状态(很容易应用于所有组件),对于某些本地状态,使用react native。 (例如,当您构建一些ui组件,如自定义复选框)

答案 3 :(得分:0)

还有静态getDerivedStateFromProps

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