React/Redux - 无法将存储值发送到组件的道具（mapStateToProps）

Question

I'm building a Twitter-like app with React & Redux,

I have a rootReducer that contains two reducers (user and newTweet), and I want to send the isConnected state value from user reducer to a component called "Accueil".

Here's the component that needs to get the isConnected value from the store state:

function Accueil({ isConnected }) {
  useEffect(() => {
    console.log("is connected ", isConnected); <---- ALWAYS UNDEFINED
  }, [isConnected]);

  return (
    <div className="Accueil">
      {isConnected ? (
        <div class="container">
          <Nav />
          <div class="row">
            <div class="col m12 l3">
              <AccountNav />
            </div>
            <div class="col m12 l6">
              <Feed />
            </div>
            <div class="col m12 l3">
              <Searchbar />
              <TrendingTopic />
              <Infos />
            </div>
          </div>
        </div>
      ) : (
        <NotConnected />
      )}
    </div>
  );
}

const mapStateToProps = (state) => ({
  counter: state.user.isConnected,
});

export default connect(mapStateToProps)(Accueil);

Here's the rootReducer combining the 2 reducers:

import { combineReducers } from "redux";

import user from "./user";
import newTweet from "./newTweet";

const rootReducer = combineReducers({
  user,
  newTweet,
});

export default rootReducer;

Here's the user reducer code:

import { LOGIN, LOGOUT } from "../constants/types";

const initialState = {
  isConnected: false,
  user: {},
};

export default function user(state = initialState, action) {
  switch (action.type) {
    case LOGIN:
      return { ...state, isConnected: true };
    case LOGOUT:
      return { ...state, isConnected: false, user: {} };
    default:
      return state;
  }
}

Does someone has an idea? Thank you

Answer 1

You are not connecting your component to the redux store and your props should be isConnected not counter :

import React from "react";
import { connect } from 'react-redux'

function Accueil({ isConnected }) {
  useEffect(() => {
    console.log("is connected ", isConnected)
  }, [isConnected]);

  return (
    <div className="Accueil">
      {isConnected ? (
        <div class="container">
          <Nav />
          <div class="row">
            <div class="col m12 l3">
              <AccountNav />
            </div>
            <div class="col m12 l6">
              <Feed />
            </div>
            <div class="col m12 l3">
              <Searchbar />
              <TrendingTopic />
              <Infos />
            </div>
          </div>
        </div>
      ) : (
        <NotConnected />
      )}
    </div>
  );
}


const mapStateToProps = (state) => ({
  isConnected: state.user.isConnected,
});

export default connect(mapStateToProps)(Accueil);

Answer 2

In the Accueil component, the name of the prop is isConnected . If you want to map a value in the redux state to that prop, you should use the same name in mapStateToProps .

const mapStateToProps = (state) => ({
  isConnected: state.user.isConnected,
});

export default connect(mapStateToProps)(Accueil);