Question

我可以在redux中调度一个动作来改变反应组件的内部状态吗？

我有一个由反应状态管理的状态，我想在redux的中间件中做一些异步的东西，这样我就可以只在一个地方管理所有的副作用。但是，我希望在完成异步调用后更改内部响应状态，并且我不想通过redux管理此状态（您需要在操作中传递太多内容）。有没有办法通过redux启动动作来改变反应状态？感谢。

Answer 1

您可以使用componentWillReceiveProps生命周期钩子来完成此操作。

因此，您应该使用connect中的react-redux连接到更新，然后更新您的本地状态。

例如：

<强> SomeContainer.jsx

import React from 'react';
import { connect } from 'react-redux';
import { yourCustomAsyncAction } from '../actions';
import SomeComponent from './components';

const mapStateToProps = state => {
  return {
    someValue: state.someState.someValue
  };
};

export default connect(mapStateToProps, { yourCustomAsyncAction })(SomeComponent));

<强> SomeComponent.jsx

import React, { Component } from 'react';

class SomeComponent extends Component {
   constructor(props) {
     super(props);

     this.state = {
       someLocalValue: '',
     }
   }

   componentWillReceiveProps(nextProps) {
       // someValue - value which we passed from redux in container
       const { someValue } = nextProps;

      if (someValue !== this.state.someLocalValue) {
          this.setState({ someLocalValue: someValue });
      }
   }

   render() {
      return <div> Here will be updated value via Redux: {this.state.someLocalValue} </div>
   }

}

export default SomeComponent;

注意： componentWillReceiveProps将从React版本16.3（应尽快发布）开始弃用，并将在17版本中删除。引入了名为getDerivedStateFromProps的新静态方法。查看更多here。

希望它会有所帮助。

如何调度动作以更改react组件中的内部状态

1 个答案: