Truffle

毛毛雨和 mapDispatchToProps 不起作用

  • August 23, 2018

我仍在與毛毛雨鬥爭,試圖調度我自己的行動。基於 Drizzle 框,我在 HomeContainer 中添加了以下內容:

import Home from './Home';
import {drizzleConnect} from 'drizzle-react';
import * as actions from '../../store/actions/actions';

// May still need this even with data function to refresh component on updates for this contract.
const mapStateToProps = state => {
   return {
       accounts: state.accounts,
       SimpleStorage: state.contracts.SimpleStorage,
       TutorialToken: state.contracts.TutorialToken,
       Series: state.contracts.Series,
       drizzleStatus: state.drizzleStatus,
       rates: state.rates.ethRate
   }
};

const mapDispatchToProps = dispatch => {
   return {
       onGetEthRate: (fiatSymbol) => {console.log(dispatch); dispatch(actions.getEthRate(fiatSymbol));}
   };
};

const HomeContainer = drizzleConnect(Home, mapStateToProps, mapDispatchToProps);

export default HomeContainer;

getEthRate 操作創建者如下所示:

export const getEthRate = (fiatSymbol) => {
   console.log("Getting ETH rate for " + fiatSymbol);
   return {
       type: actionTypes.GET_ETH_RATE,
       fiatSymbol: fiatSymbol
   };
};

然後我在 rootSaga.js 中註冊了一個 saga 來處理這個動作:

export default function* root() {
   yield all(
       drizzleSagas.map(saga => fork(saga)),
       takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
   );
}

但是永遠不會觸發以下傳奇,因為我從未在控制台中看到日誌:

export function* getEthRateSaga(action) {
   console.log("Fetching ETH rate for " + action.fiatSymbol);
   try {
       const response = yield http.get('/price?fsym=ETH&tsyms=' + action.fiatSymbol);
       const rate = response.data[action.fiatSymbol];
       yield put(actions.updateEthRate(action.fiatSymbol, rate));
   } catch(error) {
       console.error(error);
   }
}

並且基於 Redux 開發控制台,甚至沒有調度 GET_ETH_RATE 操作,所以我想知道 mapDispatchToProps 是否適用於 drizzleConnect。

好的,所以我想通了。我被 Redux DevTools 誤導了,這讓我認為操作沒有被分派,因為當我過濾操作的名稱時,我什麼也沒看到。但顯然,該操作已發送,但 Saga 並未接收到該操作,因為我的初始化存在錯誤:

export default function* root() {
   yield all(
       drizzleSagas.map(saga => fork(saga)),
       takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
   );
}

問題是 all() 需要一個數組,我將它傳遞給一個數組和一個孤立的對象。這是解決這個問題並將我的 takeEvery 附加到 drizzleSagas.map() 的結果的正確語法:

export default function* root() {
   yield all([
       ...drizzleSagas.map(saga => fork(saga)),
       takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
   ]);
}

這樣,一切正常。

引用自:https://ethereum.stackexchange.com/questions/56555