Reducer not holding the server response object - reactjs - reactjs

Question

I am trying to learn react and got an issue in redux.
The code is as follows.
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);
As you can see, when the form is submitted, this.props.getBooks() action is called.
The action is defined as follows.
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;
}),
});
};
}
I am using axios for making api calls. The issue is that I am not getting the server response in reducer. The reducer is as follows.
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;
}
}
On debugging, i found that the action is having only the following
{type: "BOOK_LIST"}
After that, in the apiMiddlewareCreator (which is defined in clientMiddleware.js), i am getting the server response
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;
};
}
reducers/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';
I need the data to be available in the reducer. That is, action.result.data.response.books should contain the response from server.
I am not sure on how to fix this.
Any help would be appreciated.

Answer 1

I think it's because you're dispatching the action before the promise is resolved.
Only dispatch the action once the promise has been resolved, e.g:
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
});
});
};
}
Your reducer will need to be updated to:
case types.ACTION_BOOK_LIST:
return { ...state,
books: action.books
};