Question

我有一个使用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);

Answer 1

无论我理解什么，你想要做的就是将组件的道具转换为组件自己的状态。您可以随时在组件的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 })
  }
}

Answer 2

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

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

Answer 3

当然可以，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组件，如自定义复选框）

Answer 4

还有静态getDerivedStateFromProps ：

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

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

4 个答案: