Я все еще борюсь с Дриззлом, пытаясь отправить свое собственное действие. На основе окна 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:
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)
]);
}
При этом все работает нормально.
Ваша реализация подключения в порядке. Drizzle принимает mapDispatchToProps, как вы реализовали здесь. (Если интересно, см . источник здесь .) Мне кажется, что у вас простая ошибка импорта. Вы экспортируете создателя действия напрямую ( export const getEthRate), но ссылаетесь на него как на actions.getEthRate. Это будет соответствовать поведению, которое вы видите, когда действие никогда не отправляется, поскольку actions.getEthRateоно не определено.
Себастьен