React State Undefined - reactjs

Question

The problem is that when I first Logged-in, The userId Variable on renderList() or the this.props.user will always be null. it will work when I refreshed it. I tried checking it on the first line of renderList function but it seems it will always be null after I logged in. I even tried to dispatch the fetchBlog actions before redirecting after logging in successfully.
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Card, Button } from 'react-bootstrap';
import { fetchBlogs, deleteBlog } from '../../actions';
class FetchBlogs extends React.Component{
componentDidMount(){
this.props.fetchBlogs();
}
renderButtons(blog, userId){
if(blog._id = userId){
return (
<div>
<Button as={Link} to={`/blogs/edit/${blog._id}`} className="mx-2" variant="outline-warning" size="md">Edit</Button>
<Button onClick={() => {
this.props.deleteBlog(blog._id)
}}
className="mx-2"
variant="outline-danger"
size="md">
Delete
</Button>
</div>
);
}
return '';
}
renderList(){
const userId = this.props.user && this.props.user._id;
return this.props.blogs.map(blog => {
return (
<Card className="m-2" key={blog.title}>
<Card.Body>
<Card.Title as={Link} to={`/blogs/${blog._id}`}>{blog.title}</Card.Title>
<Card.Text>{blog.content}</Card.Text>
</Card.Body>
<div className="mb-2">
{this.renderButtons(blog, userId)}
</div>
</Card>
);
})
}
render(){
return (
<div>
<h2 className="m-2">My Blogs</h2>
{this.renderList()}
</div>
);
}
}
const stateToProps = state => {
return {
blogs: Object.values(state.blogs),
user: state.auth.user,
}
}
export default connect(stateToProps, { fetchBlogs, deleteBlog, })(FetchBlogs);
This is the code for my action login
export const login = formValues => async dispatch => {
const config = {
header: {
'Content-Type': 'application/json'
}
};
try{
const res = await portfolios.post('/auth/login', formValues, config)
dispatch({
type: 'LOGIN_SUCCESS',
payload: res.data
});
dispatch(fetchBlogs())
history.push('/blogs/all');
}catch(e){
dispatch({
type: 'LOGIN_FAILED',
});
history.push('/auth/login');
}
}
This is my Auth Reducer
const INITIAL_STATE = {
access: localStorage.getItem('access'),
isAuthenticated: null,
isLoading: false,
user: null,
}
const authReducer = (state = INITIAL_STATE, action) => {
switch(action.type){
case 'LOGIN_SUCCESS':
case 'REGISTER_SUCCESS':
localStorage.setItem("access", action.payload.token);
return {
...state,
access: action.payload.token,
user: action.payload.user,
isAuthenticated: true,
isLoading: false
};
case 'AUTH_ERROR':
case 'LOGIN_FAILED':
case 'LOGOUT_SUCCESS':
case 'REGISTER_FAIL':
localStorage.removeItem('access');
return {
...state,
user: null,
isAuthenticated: false,
isLoading: false,
}
default:
return state;
}
}
I don't know what am I missing. Ive checked and Searched some answers and I did check if the prop is null but still no changes