how to call ajax in react using `redux-thunk`?

Question

I am trying call ajax in react using redux-thunk and axios .I want to get data from json file

simple way (on button click call like this)

 axios.get('data.json').then((data)=>{
      console.log(data);
    })

But I want to use redux-thunk.In other words I need subscribe in component which will be dispatch using thunk

can we use thunk here ?? here is my code https://plnkr.co/edit/bcGI7cHjWVtlaMBil3kj?p=preview

const thunk = ReduxThunk.default;
const abc= (state={},action) => {
  console.log('in redux', action.type)
  switch(action.type){
    case 'GET_DATA':
      return dispatch =>{
        return axios.get('data.json');
      };

      default :
      return state;
  }
}
const {createStore,bindActionCreators ,applyMiddleware } =Redux;
const {Provider,connect} =ReactRedux;

const store = createStore(abc,
applyMiddleware(thunk)
);

class First extends React.Component {
  constructor (props){
    super(props);

  }

  getDate(){
    this.props.getData();
    // axios.get('data.json').then((data)=>{
    //   console.log(data);
    // })
  }
  render(){
    return (
    <div>
      <button onClick={this.getDate.bind(this)}>GET DATA</button>

    </div>
    )
  }
} 

const actions = {
    getData: () => {
        return {
            type: 'GET_DATA',
        }
    }
};

const AppContainer = connect(
    function mapStateToProps(state) {
        return {
            digit: state
        };
    },
    function mapDispatchToProps(dispatch) {
        return bindActionCreators(actions, dispatch);
    }
)(First);
ReactDOM.render(
   <Provider store={store}>
    <AppContainer/>
  </Provider>
  ,document.getElementById('root'))

Answer 1

There is a good tutorial on egghead.io about this ... you might want to check it out. https://egghead.io/lessons/javascript-redux-dispatching-actions-asynchronously-with-thunks

Answer 2

I have used axios as example here for calling apis, you can use fetch or superagent also.You can try something like.

AXIOS

 axios.get('//url')
  .then(function (response) {
    //dispatch action
  })
  .catch(function (error) {
    // throw error
  });

So that was for the API call, now coming to the state. In redux there is one state which handles your app. I would suggest you should go through redux basics which you can find here . So once your api call succeeds you need to update your state with the data.

Action to fetch data

 function fetchData(){
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
        const url = '//you url'
        fetch(url)
        .then (response ) => {dispatch(receiveData(response.data)} //data being your api response object/array
        .catch( error) => {//throw error}
    }
  }

Action to update state

   function receiveData(data) {
      return{
        type: 'RECEIVE_DATA',
        data
     }
   }

Reducer

   function app(state = {},action) {
      switch(action.types){
          case 'RECEIVE_DATA':
                 Object.assign({},...state,{
                   action.data 
                     }
                  }) 
          default:
             return state
      }
   }