React|Redux|Thunk-如何从组件中加载数据

Question

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

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

我想做什么（使用承诺）-

1. 取回财产（来自第2段）
2. 然后，如果需要数据，则调度正常流（第1段）
3. 如果不需要数据，请继续

我的问题是，在你看来，它应该去哪里。

一方面，在商店里做这件事感觉太过分了。另一方面，我很可能会遇到副作用问题。此外，我可以在组件或动作创建者中实现逻辑。你认为什么是最好的？

其他信息：1.我在用redux thunk。换成sagas是不可能的。2.我正在检查的属性在1个reductor中，而需要提取的数据在另一个reducter中（不知道，对于某些解决方案来说可能有问题）。

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

更新

这可能对未来的访问者有用——在操作创建者中获取状态

Answer 1

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

因此，我首先要把第1点的关注点分开。（数据库调用）和2。（其他）

您可以先编写一个组件包装器（ComponentWrapper，HoC），它只执行数据库调用，以获得进一步处理所需的道具。

一旦你从数据库中提取了数据，你就可以用数据作为道具来渲染InnerComponent，并在那里做你需要的一切，只需检查你注入的道具并触发其他操作。

Answer 2

我不会让我的组件处理逻辑。保留所有关于View的组件。将组件视为时间点状态的可视化表示。

在componentWillMount中，您可以检查数据是否存在，如果不存在，则调用您的操作，该操作将通过API获取数据并将数据传递给reducer。reducer将"更新"状态。

调度调用应该从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);