Хранилище Redux возвращает нулевое значение в компоненте класса React

Question

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

Хотя все выглядит нормально, this.props.user дает null в компоненте.

store.js:

import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import rootReducer from "./reducers";

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

actions.js

import { CREATE_USER, PROPAGATE_LOGIN, PROPAGATE_LOGOUT } from "./actionTypes";
import axios from 'axios';

export const getCurrentUser = () => {
  return dispatch => {
    axios.get("/users/get_current_user", {})
    .then(response => {
      if (response.data.user) {
        dispatch(propagateLogin(response.data.user));
      } else {
         console.log("pas d'utilisateur connecté.")
         dispatch(propagateLogout());
       }
    });
  };
};

export const propagateLogin = (user) => ({
  type: PROPAGATE_LOGIN,
  payload: {
    user
  }
});

export const propagateLogout = () => ({
  type: PROPAGATE_LOGOUT,
  payload: { }
});

users.js редуктор:

import { CREATE_USER, PROPAGATE_LOGIN, PROPAGATE_LOGOUT } from "../actionTypes";

const initialState = {
  user: null
};

export default function(state = initialState, action) {
  switch (action.type) {
    case PROPAGATE_LOGIN: {
      return {
        user: action.payload.user
      }
    }
    case PROPAGATE_LOGOUT: {
      return {
        user: null
      }
    }
    default:
      return state;
  }
}

AppRouter.js (подключенный компонент):

class AppRouter extends React.Component  {
 defaultState() {
  return {
    isReady: false,
    user: this.props.user,
    loginModalOpen: false,
    signupModalOpen: false
  }
}

constructor(props) {
  super(props)
  this.state = this.defaultState()
}

componentDidMount() {
  this.getUser();
}

getUser(history = undefined) {
  this.props.getCurrentUser();
  this.setState({
    isReady: true
  });
}

render (){
// [...]
}

};

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    user: state.users.user
  }
}

const mapDispatchToProps = { getCurrentUser, propagateLogout }

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AppRouter);

А вот скриншот из консоли React dev: для Provider Component:

Answer 1

Когда вы пишете в пользовательском редукторе user.js, начальное состояние пользователя равно нулю

const initialState = {
  user: null
};

Поскольку действие get user является асинхронным, вы просто присваиваете нулевое значение пользователю в начальном состоянии

 defaultState() {
  return {
    isReady: false,
    user: this.props.user, //this.props.user null here
    loginModalOpen: false,
    signupModalOpen: false
  }

Вы можете использовать this.props.user, не задавая ему значение состояния