how to load data from file in react?

Question

i am trying to load data from file using redux-thunk could you please tell me how to call load function I want to get data from file from react-thunk 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 action
      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();
  }
  render(){
    return (
    <div>
      <button onClick={this.getDate.bind(this)}>GET DATA</button>

    </div>
    )
  }
} 

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

 function loadSuccess(data){
    return {type :"LOAD_DATA",data}
}
    function load(){
    return dispatch => {
        return axios.get('data.json').then(data=>{
            return dispatch(loadSuccess(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

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

The load action creator should return a function that performs the async request for the data. When that async request for the data from the file resolves, the thunk can then dispatch the action that updates the store:

const { createStore, bindActionCreators, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux;
const thunk = window.ReduxThunk.default;

const abc = (state={}, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return action.payload;
    default:
      return state;
  };
};

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

class First extends React.Component {
  constructor (props){
    super(props);
    this.getData = this.getData.bind(this);
  }

  getData(){
    this.props.load();
  }

  render() {
    return (
      <div>
        <button onClick={this.getData}>GET DATA</button>
        <pre>{JSON.stringify(this.props.data)}</pre>
      </div>
    );
  }
} 

const actions = {
  load: () => {
    return (dispatch) => {
      return axios.get('data.json').then((response) => {
        dispatch({  
          type: 'SET_DATA',
          payload: response.data,
        });
      });
    };
  }
};

const mapStateToProps = (state) => ({
  data: state
});

const mapDispatchToProps = (dispatch) => ({
  load: bindActionCreators(actions.load, dispatch),
});

const AppContainer = connect(mapStateToProps,   mapDispatchToProps)(First);

ReactDOM.render(
  <Provider store={store}>
    <AppContainer/>
  </Provider>
  ,document.getElementById('root'));

https://embed.plnkr.co/mJQtEye8SOtXna26XEf7/