為什么我的reactredux狀態不會導致重新渲染？

您好，我有一個問題，當我嘗試使用選擇器時，我的 redux 狀態不會導致重新渲染。我對 react-redux 和 typescript 很陌生。我一直在嘗試用谷歌搜索這個，大多數互聯網執行緒都說這是因為你需要創建一個新物件并回傳它讓 redux 知道狀態已經改變。我已經在做什么了。但是我的物件沒有重新渲染，狀態已更新但不會導致重新渲染。

我究竟做錯了什么？

我的 Redux 減速器

import { Computer, GraphicsCard } from "../../interfaces";

const initialState: Computer = {
    graphicsCard: null,
}


interface SelectGraphicsCardAction {
    type: "SELECT_GRAPHICSCARD";
    payload: GraphicsCard;
}

interface UnselectGraphicsCardAction {
    type: "UNSELECT_GRAPHICSCARD";
}


export type Action = SelectGraphicsCardAction | UnselectGraphicsCardAction

export const computerReducer = (state = initialState, action: Action) => {
    switch(action.type){
        case "SELECT_GRAPHICSCARD": {
            const { payload } = action;
            console.log(state, payload)

           const newState = {
                ...state,
                graphicsCard: {
                    ...state.graphicsCard,
                    ...payload
                }
            }
            //This evaluates to false
            console.log(state === newState)

            return newState
        }
        case "UNSELECT_GRAPHICSCARD": {
            return {
                ...state,
                graphicsCard: null
            }
        }
        default:
            return state;
    }

} 

我的 Redux 商店

import { configureStore } from '@reduxjs/toolkit'
import { computerReducer } from './reducers/ComputerReducer'
// ...

 export const store = configureStore({
  reducer: {
    computer: computerReducer
  },
})

我在這里選擇/使用狀態。

function SelectedComputer() {
  const computer = useSelector((state: Computer) => state);
  const dispatch = useDispatch();
  const { graphicsCard } = computer;

  //Logging correct state
  console.log(computer)

  return (
    <div className="fixed top-10 right-4 bg-white rounded-t-lg">
      <p className="text-center font-bold border-b-1 border-b-black bg-gray-100 rounded-t-lg shadow-md">
        Selected Parts
      </p>
      <div className="flex flex-row">
        <CpuFill className="m-1" />
        {graphicsCard ? (
          //Not rendering this when updating state.
          <p>{graphicsCard.name}</p>
        ) : (
          <p>No Graphicscard selected!</p>
        )}
        <Trash className="flex justify-center"/>
      </div>

編輯：這是一個片段，我使用調度來更新狀態。

import React, { FC } from "react";
import { Button, Card } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { Component, ComputerComponent } from "../interfaces";
import { Action } from "../redux/reducers/ComputerReducer";

interface ComponentCard {
  component: Component;
  buttonText: string;
  type: string;
}

interface DomainImage {
  [key: string]: string;
}

const ComponentCard: FC<ComponentCard> = ({ component, buttonText, type }) => {
  const dispatch = useDispatch();

  const imageMap: DomainImage = {
    "inet.se": "https://cdn.inet.se/gfx/ext/226/brand-assets/inet-logo2.jpg",
    "komplett.se":
      "https://cached-images.bonnier.news/gcs/di-bilder-prod/mly/fcb28d10-158c-485b-814c-b461baa0e188.jpeg",
    "webhallen.se":
      "https://static.wikia.nocookie.net/logopedia/images/6/65/Webhallen_2021.svg/revision/latest?cb=20220420201224",
  };

  return (
    <Card className="flex flex-row items-center w-50 shadow-md mt-2 mb-2">
      <div className="flex justify-center items-center mr-3">
        <img className="h-36 w-40 p-2" src={component.imgUrl} />
      </div>
      <div className="flex-1 text-left">
        <h4 className="text-base">{component.name}</h4>
        <p>
          <span>
            ArtNr: {component.articleNumber}, Manufacturer:{" "}
            {component.manufacturer}
          </span>
        </p>
        <h4 className="absolute right-36 top-10">
          <span>{component.price} :-</span>
        </h4>
      </div>
        <Button
          color=""
          className="absolute right-5 h-10 w-20"
          onClick={() => dispatch({ type, payload: component })}
        >
          {buttonText}
        </Button>
        <a href={component.url} target="_blank" className="absolute right-5 bottom-0">
          <img
            className="w-15 h-10"
            src={imageMap[component.domainName]}
            alt={component.name}
          />
        </a>
    </Card>
  );
};

uj5u.com熱心網友回復：

值得一提的是，您在這里使用的是極其過時的（2019 年之前）風格的 Redux，最終將是您使用現代 Redux 撰寫的代碼的 4 倍——尤其是與 TypeScript 結合使用時。

我強烈建議您遵循官方的 Redux 教程和TypeScript 快速入門，它將向您展示您必須設定的所有其他型別（它比您現在擁有的要少得多）。

您的問題的根源可能是意外的狀態修改，這也可能發生在舊版 Redux 中的 reducer 之外 - 在現代 Redux 中，您會在進行突變時立即收到錯誤 - 節省您數小時的除錯時間。所以我真的建議你直接切換，你可能會擺脫這個錯誤。

標籤：反应 打字稿 还原 反应还原 状态

上一篇：無法呈現服務器動態回傳的html標簽

下一篇：在反應中拆分字串并作為物件回傳給用戶