Why "State" is empty after action is dispatched?

Question

I am working on Log in authentication. After user logged in successfully I want to show log out button based on token value in the state. User gets logged in successfully But actually state is empty and have no values which are passed from express server. So if state token property is empty it does not show log out button after logged in .

api code

import axios from 'axios'

export default {
   user:{
       login:(credential) => axios.post('/api/auth',{credential}).then(res => res.data.user)
   }
}

action code

import {USER_LOGGED_IN} from '../types'
import api from '../api'

export const userLoggedIn = user => ({
    type: USER_LOGGED_IN,
    user
  });
export const login = (credential) =>(dispatch) => api.user.login(credential).then(user => dispatch(userLoggedIn(user)))

type code

export const USER_LOGGED_IN = 'USER_LOGGED_IN'

user reducer

import { USER_LOGGED_IN } from "../types";

export default function user(state ={}, action = {}) {
  switch (action.type) {
    case USER_LOGGED_IN:
      return action.user;
    default:
      return state;
  }
}

rootReducer

import { combineReducers } from "redux";

import user from "./reducers/user";
// import books from "./reducers/books";

export default combineReducers({
  user:()=>({

  })

});

HomePage

import React from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'

import { Link } from  'react-router-dom'

 function HomePage({isAuthenticated}) {
  return (
    <div>
      <h1>Home Page</h1>
      { isAuthenticated ?    <button>Logout</button> : <Link to ="/login">Login</Link>}
    </div>
  )
}
HomePage.propTypes ={
  isAuthenticated:PropTypes.bool.isRequired
}
function mapStateToProps(state){
  console.log(state.user.token); // this shows undefined

  return{
    isAuthenticated:!!state.user.token
  }


}

export default connect(mapStateToProps)(HomePage)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from  'redux-devtools-extension'
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './rootReducer'

const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk)))
ReactDOM.render(<BrowserRouter><Provider store={store}><App /></Provider></BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();

In redux devtool chrome extension action has user object with property email and token but state is empty — Tayyab Khan Shinwari, Nov 09 '19 at 04:49

score 2 · Accepted Answer · answered Nov 09 '19 at 06:16

2

update rootreduer file to

import { combineReducers } from "redux";

import user from "./reducers/user";
// import books from "./reducers/books";

export default combineReducers({
  user
});

answered Nov 09 '19 at 06:16

JLD

570
2
6

score 2 · Answer 2 · answered Nov 09 '19 at 06:25

2

Actually you are not providing your user reducer in combine reducers, you can do as

import { combineReducers } from "redux";

import user from "./reducers/user";

export default combineReducers({
 user
 })
});

Hope it helps

answered Nov 09 '19 at 06:25

ibtsam

1,620
1
10
10

Yes why not but please upvote my question as well I am in danger zone blocking for question – Tayyab Khan Shinwari Nov 09 '19 at 07:06
1

sure I will do that – ibtsam Nov 09 '19 at 07:31

Why "State" is empty after action is dispatched?

2 Answers2