Drizzle and mapDispatchToProps not working

Question

I'm still struggling with Drizzle, trying to dispatch my own action. Based on the Drizzle box, I added the following to 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;

The getEthRate action creator looks like this:

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

And then I registered a saga to process that action in rootSaga.js:

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

But the following saga is never triggered, as I never see the log in the console:

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);
    }
}

And based on the Redux dev console, the GET_ETH_RATE action is not even dispatched, so I'm wondering if mapDispatchToProps works with drizzleConnect.

Answer 1

OK, so I figured it out. I was misled by Redux DevTools that made me think that the action was not dispatched because when I filtered on the action's name, I didn't see anything. But apparently, the action was dispatched, but not picked up by Saga because there was a mistake in my initialization there:

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

The issue is that all() expects an array, and I pass it an array and an isolated object. Here is the right syntax to fix that and append my takeEvery to the result of drizzleSagas.map():

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

With that, everything works fine.

Answer 2

Your connect implementation is fine. Drizzle accepts mapDispatchToProps as you've implemented it here. (See the source here, if interested.) It looks to me like you've got a simple import error. You're exporting the action creator directly (export const getEthRate), but referencing it as actions.getEthRate. That would match up with the behavior you are seeing where the action is never dispatched, since actions.getEthRate would be undefined.