Dispatching multiple actions using redux-thunk updates component only once - reactjs

Question

I'm using redux-thunk for dispatching multiple action from one dispatch within a component.
export function fetchQuestions() {
return function(dispatch, getState) {
dispatch({type: "QUESTION_FETCH_PENDING"});
axios.get(`http://${API_ROOT}/api/questions/list`, {
headers: {'JWT': getState().users.token}
})
.then((response) => {
//if registration is successful tell it to reducer and authorize user
dispatch({type: "QUESTION_FETCH_SUCCESS", payload: response});
})
.catch((err) => {
if (err.response.data == "login") {
dispatch(unauthorizedRequest());
}
dispatch({
type: "QUESTION_FETCH_FAIL",
payload: err
});
});
}
}
The problem is that I want component to be updated on each dispatch that are inside of wrapping dispatch. They all proceed to reducer, and I can see them logged in console.
But that does not happen, component is only updated after first dispatch.
You can see, "FEED RENDER" message that is called each time render() called, and it is not called after remaining dispatches.
Thank you in advance!
UPDATE 1: Here is code for my reducer
export default function reducer(state={
questions: [],
questionPending: false,
questionSuccess: false,
questionFetching: false,
questionFetched: false,
error: null
}, action) {
switch(action.type) {
case "QUESTIONS_FETCH_PENDING": {
return {...state, questionFetching: true, questionFetched: false}
}
case "QUESTIONS_FETCH_SUCCESS": {
return {...state, questionFetching: false, questionFetched: true, questions: action.payload}
}
case "QUESTIONS_FETCH_FAIL": {
return {...state, questionFetching: false, questionFetched: false, error: action.payload}
}
case "QUESTION_ADD_PENDING": {
return {...state, questionPending: true, questionSuccess: false}
}
case "QUESTION_ADD_SUCCESS": {
return {...state, questionPending: false, questionSuccess: true}
}
case "QUESTION_ADD_FAIL": {
return {...state, questionPending: false, questionSuccess: false}
}
}
return state;
}
And for injecting store, I simply use #connect decorator:
#connect((store) => {
return {
questions: store.questions,
isAuth: store.users.isAuth
};
})
Problematic component:
export default class Feed extends React.Component {
componentWillMount() {
this.props.dispatch(fetchQuestions());
}
componentWillUpdate() {
console.log(this.props);
if (!this.props.isAuth) {
this.props.router.push('/auth');
}
}
logout() {
this.props.dispatch(logoutUser());
}
render() {
console.log("FEED RENDER!");
let questions = this.props.questions.questions.map((question) => {<questionFeed question={question}/>});
return (
<div>
<button onClick={this.logout.bind(this)}>LOGOUT</button>
THIS IS FEED!
</div>
);
}
}

Answer 1

The problem was simple TYPO: the names of actions didn't match to ones that are in reducers.
You can see I was dispatching QUESTION_FETCH_FAIL and QUESTION_FETCH_SUCCESS, but handling QUESTIONS_FETCH_FAIL and QUESTIONS_FETCH_SUCCESS.
SOLUTION: According to best practices of redux, you should always store action names in variables and share them with reducer.
NOTE: Don't fall to same dellusion as me, logged action in console does not mean it has reached the reducer
SPECIAL THANKS: To #OB3 for noting typo