反應-Redux。通過useDispatch更改狀態后，組件未通過useSelector更新

我有useSelectors來檢查我的 App 組件是否正在更新。第一個在 App 組件的開頭，第二個在 App 回傳部分。通過單擊字母，商店中的 currendElementId 更新沒有問題（我通過 Redux DevTools 進行了檢查）。但是useSelectors沒有更新。

我知道在 reducers 中狀態應該更新為不可變的，但在createSlice中我們可能會使用可變代碼，所以這不是我的情況。（無論如何，我已經嘗試制作狀態副本，更改它然后發送它，但它的作業方式相同）

有我的代碼：store.js

import { configureStore } from "@reduxjs/toolkit";
import pagesReducer from "./../features/Pages/pagesSlice.js";

export default configureStore({
    reducer: {
        pagesInfo: pagesReducer,
    },
})

pageSlice.js

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

const initialState = {
    currentPage: 0,
    currentElementId: null,
    pages: [ // Pages
        { // Page
            id: nanoid(),
            lines: [
                { // Line
                    id: nanoid(),
                    aligned: "left",
                    content: [
                        { // Symbol
                            id: nanoid(),
                            type: "symbol",
                            symbol: "F",
                            isBold: false,
                            isItalic: false,
                            isUnderlined: false,
                            fontSize: 18,
                            color: "black",
                        },
                        { // Symbol
                            id: nanoid(),
                            type: "symbol",
                            symbol: "o",
                            isBold: false,
                            isItalic: false,
                            isUnderlined: false,
                            fontSize: 18,
                            color: "black",
                        },
                        { // Symbol
                            id: nanoid(),
                            type: "symbol",
                            symbol: "r",
                            isBold: false,
                            isItalic: false,
                            isUnderlined: false,
                            fontSize: 18,
                            color: "black",
                        },
                    ],
                },
                {
                    id: nanoid(),
                    aligned: "left",
                    content: [
                        { // Image
                            id: nanoid(),
                            type: "image",
                            imageSrc: "./img/me and the boys.png",
                            width: 200,
                            height: 200,
                        },
                    ],
                },
            ],
        },
    ],
}

const textSlice = createSlice({
    name: "pagesInfo",
    initialState,
    reducers: {
        changeCurrentElementID(state, action) {
            state.currentElementId = action.payload;
            // return {
            //     ...state,
            //     currentElementId: action.payload,
            // }
        }
    },
})

export const { changeCurrentElementID } = textSlice.actions;
export default textSlice.reducer;

index.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from "./app/store.js";
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

應用程式.js

import css from "./App.module.css";
// import BoldingTextButton from "./features/BoldingTextButton/BoldingTextButton.js";
import "./nullStyle.css";
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { changeCurrentElementID } from "./features/Pages/pagesSlice.js";
import EnterImageButton from "./features/Pages/EnterImage/EnterImageButton.js";
import TextSizing from "./features/Pages/TextSizing/TextSizing.js";
import TextDecoration from "./features/Pages/TextDecoration/TextDecoration.js";
import TextAligning from "./features/Pages/TextAligning/TextAligning.js";

function App(props) {
  console.log(useSelector(state => state.currentElementId));

  const dispatch = useDispatch();

  // document.addEventListener("click", event => {
  //   const target = event.target.closest("li")

  //   if (target) {
  //     const elementID = target.getAttribute("elementid");

  //     dispatch(changeCurrentElementID(elementID));
  //   }
  // })

  const changeElementID = event => {
    const target = event.target.closest("li")

    if (target) {
      const elementID = target.getAttribute("elementid");

      dispatch(changeCurrentElementID(elementID));
    }
  }

  const GetPageContent = () => {
    const rawPageLinesContent = useSelector(state => state.pagesInfo.pages[state.pagesInfo.currentPage].lines);
    const currentElementID = useSelector(state => state.currentElementId);

    const completedPageContent = rawPageLinesContent.map(line => {
      return (
        <ul key={line.id} className={css["page-line"]}>
          {
            line.content.map(element => {
              let finalElement;

              if (element.type == "symbol") {
                const style = { fontSize: element.fontSize   "px" }

                finalElement = (
                  <li onClick={changeElementID} key={element.id} elementid={element.id} className={`${css["page-line__item"]} ${css["page-line__symbol"]}`} style={style}>{element.symbol}</li>
                )

                if (currentElementID == element.id) {
                  finalElement = (
                    <input key={element.id} elementid={element.id} maxLength="1" className={`${css["page-line__item"]} ${css["page-line__symbol"]} ${css["page-line__choosen"]}`} style={style} value={element.symbol} />
                  )
                }
              }
              else if (element.type == "image") {
                finalElement = (
                  <li onClick={changeElementID} key={element.id} elementid={element.id} className={`${css["page-line__item"]} ${css["page-line__image"]}`}>
                    <img src={element.imageSrc} width={element.width} height={element.height} alt="反應-Redux。通過 useDispatch 更改狀態后，組件未通過 useSelector 更新" />
                  </li>
                )
              }
              // else if (element.type == "enter") {
              //   finalElement = (
              //     <li key={element.id} elementid={element.id} className={`${css["page-line__item"]} ${css["page-line__image"]}`}>
              //       <br />
              //     </li>
              //   )
              // }

              return finalElement;
            })
          }
        </ul >
      )
    })

    return completedPageContent;
  }

  return (
    <div className={css["App"]}>
      <header className={`${css['App__header']} ${css['tools']} `}>
        <EnterImageButton />
        <TextSizing />
        <TextDecoration />
        <TextAligning />
        <div>{useSelector(state => state.currentElementId) || 0}</div>
      </header >
      <div className={`${css['App__content']} ${css['pages']} `}>
        <div className={`${css['pages__item']}`} >
          {GetPageContent()}
        </div>
      </div>
    </div >
  );
}

export default App;

uj5u.com熱心網友回復：

你的選擇器是錯誤的。

既然你有

export default configureStore({
    reducer: {
        pagesInfo: pagesReducer,
    },
})

您的pages切片安裝為slice.pagesInfo.

所以你需要做

useSelector(state => state.pagesInfo.currentElementId)

標籤：javascript 反应 还原 反应还原

上一篇：是什么導致我的Canvas元素溢位，我能做些什么來修復它？

下一篇：如何從子組件呼叫父組件的方法？