Question

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

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

我在考虑做什么（使用承诺） -

获取属性（来自第2段）
然后，如果需要数据，则调度正常流程（第1段）。
如果不需要数据，请继续。

我的问题是你的意见应该放在哪里。

一方面，通过商店来做这件事就像是一种过度的过度杀戮。另一方面，任何机会我都会遇到副作用问题。另外，我可以在组件或动作创建器中实现逻辑。你认为最好的是什么？

其他信息：我正在使用redux-thunk。换成传奇是不可能的。 2.我检查的属性在1个reducer中，而需要获取的数据在另一个reducer中（dunno，某些解决方案可能有问题。）。

选项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.
        }
      })
  }
}

更新

对于未来的骚扰者来说，这可能会派上用场 - getting state inside an action creator

Answer 1

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

所以我首先要分开第1点（数据库调用）和2.（其他所有内容）的关注点

您可以从编写仅包含数据库调用的Component-Wrapper（HoC）开始，以获得进一步处理所需的支持。

从db获取数据后，您可以使用数据作为prop渲染InnerComponent，并通过检查您注入的prop并执行其他操作来执行您需要的所有其他操作。

Answer 2

我不会让我的组件处理逻辑。保持组件的全部视图。将组件视为时间点状态的可视化表示。

在componentWillMount中，您可以检查数据是否存在，如果不存在则调用您的操作，该操作将通过API获取数据并将数据传递给reducer。减速机将更新＆＃39;国家。

应该从actions.js调用调度调用，而不是从您的组件调用。

Answer 3

所以，我的感觉是对的 - 它是选项2。就像@guruPitka建议的那样。

在我的动作创建者（由组件调用）中，我获得当前的应用状态，进行API调用，比较令牌并采取相应的行动。

export function getToken(uid) {
    return (dispatch, getState) => {
        const currentToken = getState().user.token;

        return api.lastAppLaunch(uid)
            .then(newToken => {
                if (newToken === currentToken) {
                    // All is good, carry on.
                } else {
                    dispatch(getData(uid)); //getData is from a different action creator.
                }
            });
    }
}

组件中的调用 -

this.props.getToken(uid);

反应| Redux | Thunk - 如何从组件中加载数据？

3 个答案: