在 react/flux 应用程序中访问和设置状态

Question

我正在开发一个带有通量实现的反应应用程序。

我有一个绑定到组件的商店，并在ctor 中设置了一些默认（空白）状态值。在componentWillMount 中，我通过触发一些更新存储数据的操作来填充状态。 store 发出一个更改，组件通过将 store 数据的位放入 state 来处理该更改。

在我的 render 方法中，我希望渲染依赖于状态数据。

目前我有几个问题。

1. 如果在我的 render 方法中我执行类似 this.state.MyThing.AProperty 的操作，那么当 MyThing 尚未填充时，会过早调用渲染方法。这似乎发生在很多我希望渲染使用状态数据的地方。是否对此有明智的防范，还是我做错了？

2. 我正在使用存储来发出更改，并通过从存储中获取数据并将其设置为组件的state 来处理更改。我的想法是，如果我将其设置为状态，那么组件将知道在状态更改时重新渲染。它是否正确？还是我应该从发出处理程序的存储中获取数据并直接使用它？或将其设置为组件中的本地变量？ 我问的原因是我似乎遇到了setState 调用不是立即的问题，并且希望在设置状态后立即使用它。考虑到这一点，我似乎做错了。

任何想法都非常感谢。

Answer 1

如果您在渲染中使用条件，则可以防止渲染未填充的数据。

<div>
  {typeof this.state.myThing == 'object' ?
    <strong>this.state.myThing.aProperty</strong> :
    <span>Nothing to see here</span>}
</div>

关于你的第二个问题，是的。这完全没问题，这是使用 Flux 的预期方式。你甚至可以从 Redux & Co 获得灵感并制作higher order components that map store state to props。

function connect(store, mapStateToProps, Component) {
  return React.createClass({
    getInitialState() {
      const state = store.getState();
      return { state };
    },
    componentWillMount() {
      store.listen(state => this.setState({ state }));
    },
    render() {
      const stateProps = mapStateToProps(this.state);
      const passedProps = this.props;
      const props = Object.assign({}, stateProps, passedProps);
      return <Component {...props} />;
    }
  });
}

此模式允许您获取现有组件并将其包装在一个 容器 中，该容器将在商店更改时重新渲染，然后使用 mapStateToProps 函数来计算要传递的道具到您的原始组件。

const MyStore = { ... };

const MyComponent = React.createClass( ... );

function mapStateToProps(state) {
  return { foo: state.bar.foo };
}

export default connect(MyStore, mapStateToProps, MyComponent);

setState 是一种异步方法，因为它需要被批处理以防止 React 应用程序在触发大量更新时延迟重绘。您可以通过将回调作为第二个参数传递来可靠地等待状态更改。

this.setState({ foo: 'bar' }, () => this.state.foo);