反应 | Redux 工具包共享 State 未定义

Question

我正在创建一个简单的应用程序来与 Redux ToolKit 一起玩； 但是，我可以在 redux chrome 选项卡中看到 object，但无法通过使用反应钩子的组件访问它。

我的切片：

 import {
  createSlice,
  createSelector,
  createAsyncThunk,
} from "@reduxjs/toolkit";

const initialState = {
  cryptoList: [],
  loading: false,
  hasErrors: false,
};

export const getCryptos = createAsyncThunk("cryptos/get", async (thunkAPI) => {
  try {
    const cryptosUrl =
      "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd";
    let response = await fetch(cryptosUrl);
    console.log(response);
    return await response.json();
  } catch (error) {
    console.log(error);
  }
});

const cryptoSlice = createSlice({
  name: "cryptos",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getCryptos.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(getCryptos.fulfilled, (state, { payload }) => {
      state.loading = false;
      state.cryptoList = payload;
    });
    builder.addCase(getCryptos.rejected, (state, action) => {
      state.loading = false;
      state.hasErrors = action.error.message;
    });
  },
});

export const selectCryptos = createSelector(
  (state) => ({
    cryptoList: state.cryptoList,
    loading: state.loading,
  }),
  (state) => state
);

export default cryptoSlice;

我的组件：

import React, { useEffect } from "react";
import { getCryptos, selectCryptos } from "./cryptoSlice";
import { useSelector, useDispatch } from "react-redux";

const CryptoComponent = () => {
  const dispatch = useDispatch();
  const { cryptoList, loading, hasErrors } = useSelector(selectCryptos);

  useEffect(() => {
    dispatch(getCryptos());
  }, [dispatch]);

  const renderCrypto = () => {
    if (loading) return <p>Loading Crypto...</p>;
    if (hasErrors) return <p>Error loading news...</p>;

    if (cryptoList) {
      return cryptoList.data.map((crypto) => <p> {crypto.id}</p>);
    }
  };

  return (
    <div className="container">
      <div className="row">CryptoComponent: {renderCrypto()}</div>
    </div>
  );
};

export default CryptoComponent;

state 中的所有构造值：cryptoList、loading、hasErrors，似乎在组件级别未定义。

任何建议表示赞赏！

Answer 1

您是否尝试过使用以下 createSelector 代码：

 export const selectCryptos = createSelector(
    (state) => state, 
    (state) => ({
     cryptoList: state.cryptoList,
     loading: state.loading,
    })
 );