Изучаю react и redux. Задача такая: при нажатии на определенную кнопку, загружать мало данных или много. После гугления и чтения SO пришел к такому коду:
Action:
export const fetchSmallData = () => {
return {
type: 'FETCH_SMALL_DATA',
payload: axios.get(`URL1`)
.then(response => {
console.log("Экшн срабатывает, я появляюсь в консоли :)")
return response.data;
})
}
}
export const fetchBigData = () => {
// то же самое, только URL другой.
}
Reducer:
export default function reducer(state=initialState, action) {
console.log("Редюсер не срабатывает. И я в консоли не появляюсь, а очень хочется :(");
switch(action.type) {
case "FETCH_SMALL_DATA":
return {...state, fetching: true}
case "FETCH_SMALL_DATA_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
case "FETCH_SMALL_DATA_FULFILLED": {
return {
...state, fetching: false, fetched: true, data: action.payload
}
}
// такая же обработка кейсов для "FETCH_BIG_DATA", "FETCH_BIG_DATA_REJECTED" и "FETCH_BIG_DATA_FULFILLED"
}
return state;
}
Компонент:
class ChoiceButtons extends React.Component {
render() {
return (
<div className="btn">
<p>Загрузить:</p>
<button onClick={() => this.props.dispatch(fetchSmallData)}>Немного данных</button>
<button onClick={() => this.props.dispatch(fetchBigData)}>Много данных</button>
</div>
);
}
}
export default connect()(ChoiceButtons)
Проблема: при нажатии на кнопку: экшн срабатывает, запрос отправляется, но редюсер почему-то нет и полученные данные в стор не сохраняются. Если эти же экшены точно так же диспатчить, например, в ComponentDidMount, то все хорошо - стор обновляется.