title: Dispatching multiple actions using redux-thunk updates component only once
body: <p>I'm using <code>redux-thunk</code> for dispatching multiple action from one dispatch within a component.</p>
  
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {               
          //if registration is successful tell it to reducer and authorize user
          dispatch({type: "QUESTION_FETCH_SUCCESS", payload: response});
      })
      .catch((err) =&gt; {
          if (err.response.data == "login") {
              dispatch(unauthorizedRequest());
          }
  
          dispatch({
              type: "QUESTION_FETCH_FAIL",
              payload: err
          });
      });
    }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/5DCem.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5DCem.png" alt="enter image description here"></a></p>
  
  <p>But that does not happen, component is only updated after first dispatch.
  You can see, <code>"FEED RENDER"</code> message that is called each time <code>render()</code> called, and it is not called after remaining dispatches.</p>
  
  <p>Thank you in advance!</p>
  
  <p>UPDATE 1: Here is code for my reducer</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  }
  </code></pre>
  
  <p>And for injecting store, I simply use <code>@connect</code> decorator:</p>
  
  <pre class="lang-js prettyprint-override"><code>@connect((store) =&gt; {
  return {
          questions: store.questions,
          isAuth: store.users.isAuth
      };
  })
  </code></pre>
  
  <p>Problematic component:</p>
  
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {&lt;questionFeed question={question}/&gt;});
  
      return (
          &lt;div&gt;
              &lt;button onClick={this.logout.bind(this)}&gt;LOGOUT&lt;/button&gt;
              THIS IS FEED!
          &lt;/div&gt;
      );
    }
  }
  </code></pre>