来自动作创建者的未定义数据？ React / Redux / Thunk

Question

I'm trying to make an async action using Redux-thunk. I'm still don't really understanding how Async call works with Redux-Thunk but I'm beginning to get a few things. I know that :

1. I need an Action-Creator
2. Some actions related to my Action-creator (something like "I'm calling the data", "I'm waiting for then", "Got it", "Oups there is an error")
3. Not sure about this but I need a Reducer to handle the action dispatched by my Action-Creator.

To start slowly I just want to pass some data into my redux-store-state. So I can check it through the react dev tool.

My Action-Creator and my Actions :

function loadData(dispatch) { 
  return axios.get(`http://localhost:3000/authors`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

export function loadData(data) {
  return {
    type: LOAD_DATA_SUCCESS,
    data
  }
}

export function failData(data) {
  return {
    type: LOAD_DATA_FAILURE,
    err
  }
}

To make sure that my local URL is sending the data correctly with axios I've also done this :

export function fetchData() {
         axios.get('http://localhost:3000/authors')
          .then(function (response) {
            console.log(response);
          })
}

My reducer :

  const ThunkData = (state = {}, action) => {
    switch (action.type) {
      case 'LOAD_DATA_SUCCESS':
        return Object.assign({}, state, {
        data: action.data,
      });
      case 'LOAD_DATA_FAILURE':
        return action.err
          default:
            return state;
                }
              };

My client.js where I'm dispatching my Action-Creator with store.dispatch(loadData()); :

const loggerMiddleware = createLogger();

function configureStore(preloadedState) {
  return createStore(
    todoApp,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    ), window.devToolsExtension ? window.devToolsExtension() : f => f
  )
}

const store = configureStore()

store.dispatch(loadData());


render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('test')
);

When I launch my app I have a ThunkData object in my store with a data object but undefined. I'm guessing there is something wrong on how my action creator is passing the data and how my reducer is receiving it.

Thanks.

Answer 1

export function loadData(data) {
  return {
    type: LOAD_DATA_SUCCESS,
    data
  }
}

export function failData(data) {
  return {
    type: LOAD_DATA_FAILURE,
    err
  }
}

These two functions are redundant in your action file. Remove them and add an export to the first loadData function. Rest of the code is fine.