如何调度一个动作来改变一个反应组件的内部状态

Question

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

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

Answer 1

您可以使用componentWillReceiveProps 生命周期钩子来实现。

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

例如：

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。

希望它会有所帮助。