reactjs - react |终极版 | Thunk - 如何从组件内加载数据？

Question

我有一个组件，它使用 componentWillMount 通过 redux 进行 API 调用来获取数据并更新状态。

在调用此方法之前，我需要访问数据库并获取一个属性，根据该属性我将决定是否应该进行数据检索(来自第 1 段)。

我正在考虑做什么(使用 promise ) -

1. 获取属性(来自第 2 段)
2. 然后，如果需要数据，则分派(dispatch)正常流程(第 1 段)。
3. 如果不需要数据，请继续。

我的问题是你认为它应该放在哪里。

一方面，通过商店来完成这件事感觉有点大材小用。另一方面，我一有机会就会遇到副作用问题。 此外，我可以在组件或 Action 创建器中实现逻辑。你认为什么最好？

附加信息: 1.我正在使用redux-thunk。改成传奇是不可能的。 2.我正在检查的属性位于1个reducer中，而需要获取的数据位于另一个reducer中(不知道，对于某些解决方案来说可能会出现问题。)。

选项 1:

import {getData} from '....../dataActions';
import {getToken} from '......../userActions';

const MegaComponent extends React.Component {
    componentWillMount() {
    getToken(uid)
        .then(shouldUpdate => {
        if (shouldUpdate) {
            getData(uid);
        } else {
            console.log('no need to get data');
        }
      }) 
  }
}

funciton mapStateToProps(state, ownProps) {
    return {
    user: state.user
  }
}

function mapDispatchToProps(dispatch) {
    return {
    getToken: (uid) => dispatch(getToken(uid)),
    getData: (uid) => dispatch(getData(uid))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(MegaComponent);

选项2(我认为应该做的)

export function getToken(uid) {
    return dispatch => {
    return api.getToken(uid)
        .then(token => {
        if (token === 'what it should') {
            return {type: 'NO_DATA_CHANGE_NEEDED', action: null};
        } else {
            // the action that handle getting data is in a different action creator.
            // I either import it here and call it, or there's a better way.
        }
      })
  }
}

更新

这可能对 future 的访问者派上用场 - getting state inside an action creator

Answer 1

嘿，这是一个非常广泛的问题，但我想就如何解决它给出一个简短的建议，尽管我不太确定我是否完全正确。

因此，我首先将关注点 1.(数据库调用)和 2.(其他所有内容)分开

您可以首先编写一个组件包装器(HoC)，它仅执行数据库调用来获取进一步处理所需的 Prop 。

从数据库获取数据后，您可以使用数据作为 Prop 渲染 InnerComponent，并通过检查您注入(inject)的 Prop 并触发其他操作来完成您需要的所有其他操作。