React | Redux | Thunk - 应该如何从组件内载入数据？

问题描述：

我有一个组件使用componentWillMount来通过redux进行API调用以获取数据并更新状态。React | Redux | Thunk - 应该如何从组件内载入数据？

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

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

获取的属性（从第2段）
然后，如果需要的数据，调度正常流动（第1款）。
如果数据不需要，继续。

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

一方面，它感觉像一个巨大的矫枉过正，通过商店。另一方面，任何机会我会遇到副作用问题。另外，我可以在组件或动作创建器中实现逻辑。你认为最好的是什么？

附加信息： 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. 
     } 
     }) 
    } 
}

UPDATE

这可能派上用场的未来visiotrs - getting state inside an action creator

答

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

所以我会通过分离点1（数据库调用）和2（一切）的担忧开始

你可以通过编写启动组件的包装器（HOC），只有做数据库调用获得进一步处理所需的道具。

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

有趣的方法！可能是一个解决方案。我会尝试在问题中添加一些代码。 – alexunder

嗨伙计，我已经添加了一些代码，认为这可能是有益的 – alexunder

是啊，我看你派遣的getData（）如果需要的话，但你如何找回数据，您的组件？数据保存在商店中？但是你不会把这个状态映射到道具上。所以，即使您更改了数据，您如何将更新的数据提供给您的组件？ – larrydahooster

答

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

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

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

答

所以，我的感觉是正确的 - 选项二是。就像@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);

React | Redux | Thunk - 应该如何从组件内载入数据？

相关推荐