反應 | 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,
    })
 );