useSelector是在调度后定义的，但随后未定义。

Question

我试图通过从App.js组件中分配操作来从还原器获取初始数据，但是当我切换到另一个组件并用useSelector加载它时，它就没有定义了。我已经在Headphones.js中尝试过这一行代码，但是第二行代码返回未定义的

const allData = useSelector((state) => state.allDataReducer);
const { loading, error, data } = allData;

App.js

const dispatch = useDispatch();
  useEffect(() => {
    dispatch(welcomeAction());
    dispatch(listAllData);
  }, [dispatch]);

​

allDataReducer.js

​

import {
  LIST_ALL_DATA_FAIL,
  LIST_ALL_DATA_REQUEST,
  LIST_ALL_DATA_SUCCESS,
} from "../constants/shared";

export const allDataReducer = (state = { loading: true, data: {} }, action) => {
  switch (action.type) {
case LIST_ALL_DATA_REQUEST:
  return { loading: true };
case LIST_ALL_DATA_SUCCESS:
  return { loading: false, data: action.payload };
case LIST_ALL_DATA_FAIL:
  return { loading: false, error: action.payload };
default:
  return state;
  }
};

​

shared.js

​

import {
  LIST_ALL_DATA_FAIL,
  LIST_ALL_DATA_REQUEST,
  LIST_ALL_DATA_SUCCESS,
} from "../constants/shared";
import Axios from "axios";

export const listAllData = async (dispatch) => {
  dispatch({
    type: LIST_ALL_DATA_REQUEST,
  });
  try {
    const { data } = await Axios.get("/all");
    dispatch({ type: LIST_ALL_DATA_SUCCESS, payload: data });
  } catch (error) {
    dispatch({ type: LIST_ALL_DATA_FAIL, payload: error.message });
  }
};

​

Headphones.js

​

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { listheadphones } from "../actions/headphonesActions";
import BasicSection from "../components/BasicSection";
import Definer from "../components/Definer";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import ProductsCategories from "../components/ProductsCategories";
import BestAudioGear from "../components/BestAudioGear";

const Headphones = (props) => {
  const dispatch = useDispatch();
  const headphonesList = useSelector((state) => state.headphonesList);

  const allData = useSelector((state) => state.allData);
        const { loading, error, data } = allData; //undefined
  //const { loading, error, headphones } = headphonesList;
  console.log(headphonesList);
  useEffect(() => {
    dispatch(listheadphones());
  }, [dispatch]);
  return (
    <div>
      <Definer title="HEADPHONES" />
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        headphones.map((headphone) => (
          <BasicSection
            key={headphone.id}
            name={headphone.headerName}
            info={headphone.info}
            mobile={headphone.mobile}
            tablet={headphone.tablet}
            desktop={headphone.desktop}
          />
        ))
      )}
      <ProductsCategories />
      <BestAudioGear />
    </div>
  );
};

export default Headphones;

​

Github回购

Answer 1

你的描述还不够具体，不能确定问题是什么。但我注意到了一些事情：

dispatch(listAllData);在我看来是不对的，动作创建者通常是一个被调用的函数：dispatch(listAllData());。

然后，在定义export const listAllData = async (dispatch) => {的地方--这应该是一个函数，如果您使用thunk中间件，它应该返回一个函数。你只定义了一个函数。