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

來源

2016-08-01 alexunder

嘿，這是一個非常廣泛的問題，但我想就如何解決這個問題給出一個簡短的建議，儘管我不確定我是否完全正確。

所以我會通過分離點1（數據庫調用）和2（一切）的擔憂開始

你可以通過編寫啓動組件的包裝器（HOC），只有做數據庫調用獲得進一步處理所需的道具。

從db中獲取數據後，您可以使用prop作爲InnerComponent來呈現數據，並通過檢查您注入的prop並執行其他操作來完成您需要的所有其他操作。

來源

2016-08-01 11:41:21 larrydahooster

有趣的方法！可能是一個解決方案。我會嘗試在問題中添加一些代碼。 – alexunder

嗨夥計，我已經添加了一些代碼，認爲這可能是有益的 – alexunder

是啊，我看你派遣的getData（）如果需要的話，但你如何找回數據，您的組件？數據保存在商店中？但是你不會把這個狀態映射到道具上。所以，即使您更改了數據，您如何將更新的數據提供給您的組件？ – larrydahooster

我不會讓我的組件處理邏輯。保持你的組件關於View。將組件視爲時間點狀態的可視化表示。

componentWillMount您可以檢查數據是否存在，如果不存在，則調用通過API獲取數據並將數據傳遞給reducer的操作。減速器將'更新'狀態。

調度調用應該從actions.js被調用，而不是從你的組件。

來源

2016-08-01 12:46:31

所以，我的感覺是正確的 - 選項二是。就像@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);

來源

2016-08-01 13:38:21 alexunder

React | Redux | Thunk - 應該如何從組件內載入數據？

回答

相關問題