Todavía estoy luchando con Drizzle, tratando de despachar mi propia acción. Basado en el cuadro Llovizna, agregué lo siguiente a 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;
El creador de la acción getEthRate se ve así:
export const getEthRate = (fiatSymbol) => {
console.log("Getting ETH rate for " + fiatSymbol);
return {
type: actionTypes.GET_ETH_RATE,
fiatSymbol: fiatSymbol
};
};
Y luego registré una saga para procesar esa acción en rootSaga.js:
export default function* root() {
yield all(
drizzleSagas.map(saga => fork(saga)),
takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
);
}
Pero nunca se dispara la siguiente saga, ya que nunca veo el registro en la consola:
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);
}
}
Y según la consola de desarrollo de Redux, la acción GET_ETH_RATE ni siquiera se envía, por lo que me pregunto si mapDispatchToProps funciona con drizzleConnect.
Bien, entonces lo descubrí. Me engañó Redux DevTools que me hizo pensar que la acción no se envió porque cuando filtré el nombre de la acción, no vi nada. Pero aparentemente, la acción fue despachada, pero Saga no la recogió porque hubo un error en mi inicialización allí:
export default function* root() {
yield all(
drizzleSagas.map(saga => fork(saga)),
takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
);
}
El problema es que all() espera una matriz y le paso una matriz y un objeto aislado. Aquí está la sintaxis correcta para arreglar eso y agregar mi takeEvery al resultado de drizzleSagas.map():
export default function* root() {
yield all([
...drizzleSagas.map(saga => fork(saga)),
takeEvery(actionTypes.GET_ETH_RATE, getEthRateSaga)
]);
}
Con eso, todo funciona bien.
Su implementación de conexión está bien. Drizzle acepta mapDispatchToProps como lo implementó aquí. (Consulte la fuente aquí , si está interesado). Me parece que tiene un error de importación simple. Estás exportando el creador de la acción directamente ( export const getEthRate), pero haciendo referencia a él como actions.getEthRate. Eso coincidiría con el comportamiento que está viendo donde la acción nunca se envía, ya actions.getEthRateque no estaría definido.
Sebastián