尝试将 redux 数据导入组件时出现 react-redux 工具包应用程序问题

Question

我正在尝试将 redux 数据添加到组件中，但当我尝试检查 redux 数据时，console.log 出现以下问题，有人可以帮助我吗

我的 redux slice 在下面。请检查粗体行，它似乎导致了问题，不确定为什么会发生

import { createSlice } from '@reduxjs/toolkit';
import alladds from '../auth/ads.json'

export const addsSlice = createSlice({
    name: 'adds',
    initialState: {
        alladds: alladds
    },
    reducers: {
        addalladds: state => {
            state.alladds = alladds
        },
        
    },
});

export const { addalladds } = addsSlice.actions;

export const selectAddSlice = state => state.addsSlice.alladds

export default addsSlice.reducer;

这是我的反应组件

import React,{useState, useEffect} from "react";
import {  useSelector } from 'react-redux';
import {selectAddSlice} from './features/auth/addsSlice'
const Addtocart = () => {
    
     const selectAddSlice1 = useSelector(selectAddSlice);
     const [alladd, setAlladds] = useState(selectAddSlice1)
   
    useEffect(() => {
       console.log(selectAddSlice + "ffffff")
    },)

  return (
    <div>
      {alladd.map((add) => (
        <div key={add.id}>
          <div> {add.addname}</div>
          <div> {add.price}</div>
        </div>
      ))}
    </div>
  );
};

export default Addtocart;

这是 redux 中的 json 数据 [ { "addname": "normaladd", “价格”：“23”， “编号”：“1” }, { "addname": "advancedadd", “价格”：“50”， “编号”：“2” }, { "addname": "premiumadd", “价格”：“100”， “编号”：“3” }

]

Answer 1

你不需要复制 Redux Store 数据到 React 本地状态，你可以直接在组件的任何地方使用selectedAdds。每当 Redux Store 中的数据更改时，该组件将重新呈现。

const selectedAdds = useSelector(selectAddSlice)

// This is not required
// const [alladd, setAlladds] = useState(selectedAdds)

useEffect(() => {
  console.log(selectedAdds)
}, [selectedAdds])
// If you want to see this log, put selectedAdds in dependency array
// So that the Hook will run whenever selectedAdds is changed

return (
  <div>
    {selectedAdds.map((add) => (
    ...

但是如果你真的需要将 Redux 数据复制到本地状态，你可以使用 useEffect:

const [alladd, setAlladds] = useState([]) // Line 1

useEffect(() => {
  setAlladds(selectedAdds) 
  // Set in State whenever selectedAdds is changed; Not 
  // just once at the Line 1 (as initial value of state)
}, [selectedAdds])

return (
  <div>
    {alladd.map((add) => (
    ...

尝试将 redux 数据导入组件时出现 react-redux 工具包应用程序问题

react- redux toolkit app issue when trying to get redux data into component

ecmascript-6

reactjs

redux

react-redux

redux-toolkit