How can i access certain res.data from async action? - reactjs

Question

I am trying to access data received from web API to action in component. I set up registerUser action that posts new user data to API and then it is being sent to DB. API sents back status in JSON format. I want to render errors/notifications based on what was being passed as value of status key.
EDIT: I added key status in redux state, in REGISTER_USER type of action i am assigning value to it according to status being sent from backend.
However, i cannot access this propery in state by this.props.state/this.props.user - console loging it results in "undefined"
authActions.js
const authState = {
users: [],
status: ''
}
export const registerUser = user => dispatch => {
axios.post('https://damianlibrary.herokuapp.com/users/register', user)
.then(res => dispatch({
type: REGISTER_USER,
payload: res.data,
status: res.data.status
}))
}
authReducer.js
import { LOGIN_USER, REGISTER_USER } from '../actions/types';
const authState = {
users: []
}
export default function(state = authState, action) {
switch(action.type) {
case LOGIN_USER:
return {
...state
};
case REGISTER_USER:
return {
...state,
users: [action.payload, ...state.users]
};
default:
return state;
}
}
RegistrationForm.js component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/authActions';
import './RegisterForm.css';
class RegisterForm extends Component {
state = {
user_name: '',
password: '',
}
onChangeHandler = (e) => {
this.setState({ [e.target.name]: e.target.value })
};
onSubmitHandler = (e) => {
const { user_name, password } = this.state
const newUser = {
user_name: user_name,
password: password
}
this.props.registerUser(newUser)
this.setState({
user_name: '',
password: ''
})
e.preventDefault();
}
render() {
const { user_name, password } = this.state;
return (
<div className='formContainer'>
<div className='form'>
<form className='bookForm' onSubmit={this.onSubmitHandler.bind(this)}>
<div className='inputs'>
<input
type='text'
name='user_name'
placeholder='Username'
onChange={this.onChangeHandler}
value={user_name}/>
<input
type='password'
name='password'
placeholder='Password'
onChange={this.onChangeHandler}
value={password}/>
</div>
<div className='buttonSpace'>
<button>Register</button>
</div>
</form>
</div>
</div>
)
}
}
const mapStateToProps = (state) => ({
user: state.user
});
export default connect(mapStateToProps, { registerUser })(RegisterForm);
Do i have to get such value in my App container (It is in ), then get status: state.status (redux state) and pass it via props to my RegisterForm component?
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(rootReducer, initialState, compose(
applyMiddleware(...middleware)
));
export default store;
rootReducer.js
import { combineReducers } from 'redux';
import bookReducer from './bookReducer';
import authReducer from './authReducer';
export default combineReducers({
book: bookReducer,
auth: authReducer
});

Answer 1

Fixed my issue. I called auth: authReducer in my rootReducer.js file and after that i tried to get what my reducer was returning by calling user: state.user instead of user: state.auth.
I can reach my redux state without any problems now.