Question

我有一个简单的redux动作和reducer，可以在不进行任何类型的Web服务请求的情况下更改状态：

// Action
export const setMyState = (value) => {
  return {
    type: 'SET_STATE',
    payload: value
  };
};

// Reducer
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SET_STATE':
      return { myState: action.payload }
  }
}

当我通过反应组件中的操作设置状态并立即从redux prop绑定调用该状态时，我没有得到当前状态：

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    this.props.setMyState('value');
    console.log(this.props.myState);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);

我知道当redux状态和绑定道具改变时，渲染将再次被调用，但我正在尝试做的是根据结果状态触发另一个Redux动作。我的选择似乎是：

了解状态更改后立即在React中的最新Redux状态
取消缩减器中的redux动作，听起来像an anti-pattern。
在我的组件或redux中设置某种状态，应该在下一个渲染时触发该动作，这看起来很笨拙。

Answer 1

您使用此Redux状态的原因是什么？

如果您尝试访问刚刚设置为Redux状态的数据，或者如果它的数据已经处于Redux状态，您可以同时调度这两个调用。

如果您需要拨打电话，因为在将数据设置为Redux状态时对数据进行了一些工作（我建议在动作中执行此工作而不是减速器），那么componentWillReceiveProps(nextProps)将执行您需要的操作。您可以将当前道具与下一个道具进行比较，并触发对Redux状态的另一次更新。

最好的方法是使用Redux middleware。

Answer 2

我的解决方案是使用事件循环处理更新，而不是调用堆栈。特别是对于您的情况，您的实现将包括setTimeout（（）=> {}）;如下：

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    setTimeout(() => { this.props.setMyState('value'); },0);
    setTimeout(() => { console.log(this.props.myState); },0);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);

Answer 3

将减速器配置为：

switch (action.type) {
  case 'SET_STATE':
    return {
      ...state,
      loading: true,
    };

  case 'SET_STATE_SUCCESS':
    return {
      ...state,
      loading: false,
      payload: value
    };
}

然后在您的组件中收听

this.props.myState.loading

然后（如果正在加载）触发您的操作！

状态改变后立即在React中获取最新的Redux状态

3 个答案: