Редуктор не держит объект ответа сервера - реагировать

Question

Я пытаюсь научиться реагировать и у меня возникла проблема в редуксе.

Код выглядит следующим образом.

import * as postActions from '../../redux/actions/postActions';

class PostForm extends Component {
  handleSubmit = (e) => {
    this.props.getBooks()
  }
  render() {
    return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={this.handleSubmit}>
       <input required type="text" ref={(input)=>this.getTitle = input} 
        placeholder="Enter Post Title"/>
       <br /><br />
       <textarea required rows="5" ref={(input)=>this.getMessage = input} cols="28" 
        placeholder="Enter Post" />
       <br /><br />
       <button>Post</button>
      </form>
    </div>
    );
  }
}

export default connect(state => ({
  ...state.books,
}),{
  ...postActions,
})(PostForm);

Как видите, при отправке формы это.Вызывается действие props.getBooks ().Действие определяется следующим образом.

import * as types from '../constants/actionTypes';
export function getBooks(obj={}) {
  const api = types.API_URL_BOOKS;
  return dispatch => {
    return dispatch({
      type: types.ACTION_BOOK_LIST,
      promise: client => client.get(api).then((data) => {
        return data;
      }),
    });
  };
}

Я использую axios для выполнения вызовов API.Проблема в том, что я не получаю ответ сервера в редукторе.Редуктор выглядит следующим образом.

import * as types from '../constants/actionTypes';
export default function reducer(state = {}, action = {}) {
  switch (action.type) {

    case types.ACTION_BOOK_LIST:
      return {
        ...state,
        books : action.result.data.response.books
      };

    default:
      return state;
  }
}

При отладке я обнаружил, что действие имеет только следующее

{type: "BOOK_LIST"}

После этого в apiMiddlewareCreator (который определен в clientMiddleware.JS), я получаю ответ сервера

function apiMiddlewareCreator(client) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, client);
    }

    const { promise, type, hideLoader, ...rest } = action;

    if (!promise) {
      return next(action);
    }

    next({ ...rest, type: `${type}` });

    const actionPromise = promise(client);

    actionPromise
      .then(result => {
        debugger
        if(result.data.success === false) throw result.data.message;


        if (result && result.data && result.data.response) {



          switch(action.type) {

            default:
                //nothing
          }
        }

        return next({ ...rest, result, type: `${type}_SUCCESS`, originalType: type })
      })

    return actionPromise;
  };
}

redurs / index.js

import { combineReducers } from 'redux';
//import { routerReducer as routing } from 'react-router-redux';

import postReducer from './postReducer';

const appReducer = combineReducers({
  // routing,
  books: postReducer,
});

const rootReducer = (state, action) => {
  return appReducer(state, action)
};

export default rootReducer;

actionTypes.js

export const ACTION_BOOK_LIST = 'BOOK_LIST';

Мне нужноданные должны быть доступны в редукторе.То есть action.result.data.response.books должен содержать ответ от сервера.

Я не уверен, как это исправить.

Любая помощь будет принята с благодарностью.

Answer 1

Я думаю, это потому, что вы отправляете действие до того, как обещание будет выполнено.

Отправляйте действие только после того, как обещание будет выполнено, например:

import * as types from '../constants/actionTypes';
export function getBooks(obj={}) {
  const api = types.API_URL_BOOKS;
  return dispatch => {
    client.get(api).then(data => {
      dispatch({
        type: types.ACTION_BOOK_LIST,
        books: data.response.books
      });
    });
  };
}

Ваш редуктор будетнеобходимо обновить до:

case types.ACTION_BOOK_LIST:
  return { ...state,
    books: action.books
  };