Question

我正在使用React＆Redux构建类似Twitter的应用程序，

我有一个rootReducer，其中包含两个reducer（user和newTweet），并且我想将isConnected状态值从用户reducer发送到名为“ Accueil”的组件。

这里是需要从存储状态获取isConnected值的组件：

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);

这是结合两个减速器的rootReducer：

import { combineReducers } from "redux";

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

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

export default rootReducer;

这是用户简化程序代码：

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;
  }
}

有人有想法吗？谢谢

Answer 1

您没有将组件连接到redux存储，并且道具应该是isConnected而不是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

在Accueil组件中，道具的名称为isConnected。如果要将redux状态的值映射到该prop，则应在mapStateToProps中使用相同的名称。

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

export default connect(mapStateToProps)(Accueil);

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

2 个答案: