Truffle
毛毛雨和 mapDispatchToProps 不起作用
我仍在與毛毛雨鬥爭,試圖調度我自己的行動。基於 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) ]); }
這樣,一切正常。