Question

我有一个组件，我想调用一个方法来检查状态何时发生变化。这是我的组件，使用虚拟方法来演示我想要做的事情（如果onboarding.show === false，则在屏幕外显示动画）：

export class Onboarding extends Component {

  animateView() {
    // i want to call this method when 
    // the state changes
    // something like;
    if (!this.props.onboarding.show) {
      Animated.spring(...);
    }
  }

  render() {
    const { onboarding, finish } = this.props; 

    return (
      <Animated.View>
        ...
      </Animated.View>
    );
  }
}

...

export default connect(
  state => {
    return {
      onboarding: state.onboarding,
    };
  },
  dispatch => {
    return {
    };
  }
)(Onboarding);

有没有办法订阅州的变化？

== UPDATE ==

根据要求，这是我的slideOffScreen方法的作用：

  slideOffScreen() {
    Animated.timing(this.state.offsetX, {
      toValue: -Dimensions.get('window').width,
      duration: 350,
      easing: Easing.elastic(),
    }).start();
  }

Answer 1

react-redux connect方法用一个知道商店状态变化的容器组件包装组件。每当状态发生变化时，connect会重新呈现包装的组件（在您的情况下为Onboarding）。

根据redux docs：

从技术上讲，容器组件只是一个使用的React组件 store.subscribe（）读取Redux状态树的一部分并提供它呈现的呈现组件的道具。你可以写一个手工容器组件，但我们建议改为生成容器组件与React Redux库的connect（） function，提供许多有用的优化来防止不必要的重新渲染。

如果您的组件在状态发生变化时没有重新呈现，请检查您是否未改变状态而不是替换状态。 Redux通过浅旧地比较旧状态和新状态（仅比较引用而不是值）来检查状态是否发生了变化。

例如，要将项目添加到数组中，您无法使用array.push(item)，因为它不会创建新数组，只需改变现有数组。相反，你必须使用像array.concat(item)这样的东西。

要更新对象，您可以在handling actios示例下的redux文档中看到，您可以看到创建新状态：

我们不会改变国家。我们使用Object.assign（）创建一个副本。 Object.assign（state，{visibilityFilter：action.filter}）也是错误：它会改变第一个参数。你必须提供一个空的 object作为第一个参数。您还可以启用对象传播运营商建议改为编写{... state，... newState}。

Answer 2

看起来很有效：

  componentWillReceiveProps(props) {
    if (!props.onboarding.show) {
      this.slideOffScreen();
    }
  }

不确定是否有办法通过redux API

来实现。

React Native + Redux：如何订阅状态变化？

2 个答案: