CODEWITHSUNDEEP
javascriptreactjsreduxredux-thunk
ceth
ceth

Reputation: 45325

Async request in Redux

Here is my store:

import {createStore, applyMiddleware} from 'redux';
import reducerFoo from './reducers/reducer';
import thunkMiddleware from 'redux-thunk';

export default function configureStore() {
  return createStore(
    reducerFoo,
    applyMiddleware(thunkMiddleware)
  );
}

actions:

import * as types from './actionTypes';    
import axios from 'axios';

export const selectTag = function(tag) {

  fetchQuestions(tag);

  return {
    type: types.SELECT_TAG,
    selectedTag: tag
  }
};

export const receiveQuestions = (json) => ({
  type: types.RECEIVE_QUESTIONS,
  questions: json
});

export const fetchQuestions = tag => {

  console.log(tag);

  let url = 'https://api.stackexchange.com/2.2/questions?order=desc&site=stackoverflow ....';    
  console.log(url);

  return function(dispatch) {
    return axios.get(url).then((response) =>
      dispatch(receiveQuestions(response))
    );
  };
};

reducer:

import * as types from '../actions/actionTypes';
import { fetchQuestions } from '../actions/actions';

const initialState = {
  questions: [],
  showTagPanel: true,
  selectedTag: '...',
  tags: ['one', 'two', 'three']
};


export default function reducerFoo(state = initialState, action) {

  switch(action.type) {

    case types.SHOW_TAG_PANEL:

      return Object.assign({}, state, {
        showTagPanel: true
      });

    case types.SELECT_TAG:         

      return Object.assign({}, state, {
        showTagPanel: false,
        selectedTag: action.selectedTag
      });

    case types.RECEIVE_QUESTIONS:

      console.log('get it');
      return state;

    default:
      return state;
  }
}

I can see url and the tag in the console:

export const fetchQuestions = tag => {

  console.log(tag);

  let url = 'https://api.stackexchange.com/2.2/questions?order=desc&site=stackoverflow ....';    
  console.log(url);

But the RECEIVE_QUESTIONS action is not working:

case types.RECEIVE_QUESTIONS:
      console.log('get it');
      break;

Why and how can I fix it ?

Update: but it works if I call it from index.js:

const store = configureStore();
store.dispatch(fetchQuestions('...'));

Update 2: I think in selectTag() I need to use 

dispatch(fetchQuestions(tag));

instead of

fetchQuestions(tag);

but I don't know how to get dispatch() here.

Upvotes: 1

Views: 85

Answers (1)

Pat Needham
Pat Needham

Reputation: 5638

Inside your fetchQuestions function, you have:

return function(dispatch) {
  return axios.get(url).then((response) =>
    dispatch(receiveQuestions(response))
  );
};

However, the place you're calling the function, within selectTag function: fetchQuestions(tag); is returning

function(dispatch) {
  return axios.get(url).then((response) =>
    dispatch(receiveQuestions(response))
  );
};

But it's never being called anywhere else. So one thing you can do is instead of returning that function within fetchQuestions, just call the axios.get part within which will eventually dispatch the receiveQuestions action once the get request returns.

export const fetchQuestions = tag => {

  console.log(tag);

  let url = 'https://api.stackexchange.com/2.2/questions?order=desc&site=stackoverflow ....';    
  console.log(url);

  return axios.get(url).then((response) =>
    dispatch(receiveQuestions(response))
  );
};

Upvotes: 1

Related Questions