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

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

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

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

Answer 2

当然可以，onClick 绑定到一些函数，如下所示：

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

然后将这个 myfunction 定义为：

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

这里setState改变了原生组件的状态，调用action会改变redux的状态，如果reducer定义的话。这些州是独立的。

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

好问题是为什么你需要两者，当然有一些例子可能有用...

一般来说，如果你需要全局需要的状态，那么使用 redux 状态（很容易应用于所有组件），对于一些本地状态，使用反应本机状态。（例如，当您 uild 一些 ui 组件，如自定义复选框时）

Answer 3

据我所知，您要做的就是将组件的 props 转换为组件自身的状态。您总是可以在组件的 componentWillReceiveProps 生命周期方法中将组件的 props 更改为组件的状态。

//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 方法总是在新 props 进入组件时由 React 执行，因此这是根据您的 props 更新组件状态的正确位置。

更新：

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

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

Answer 4

还有static getDerivedStateFromProps:

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

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

Map properties to state in react-redux

javascript

reactjs

redux

react-redux