react/redux 应用程序 - 从 redux 切片获取操作以响应组件时出现问题

Question

嗨，我正在使用 reduxtoolkit 创建一个 React 应用程序，它具有添加到购物车的功能我正在尝试使用 redux 状态更新添加到购物车按钮，当我正在获取递增和递减的 redux 操作时，它显示错误 ReferenceError：初始化前无法访问 'selectadto' 不确定我在这里遗漏了什么，如果有人知道请检查

我的组件在下面

import React, { useState, useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";
import { selectAddSlice } from "./features/auth/addsSlice";
import { selectadto } from "./features/auth/addtoSlice";
import { increment, decriment } from "./features/auth/addtoSlice";

const Addtocart = (props) => {
  const dispatch = useDispatch();
  const selectedAdds = useSelector(selectAddSlice);
  const selectedTodo = useSelector(selectadto);

  useEffect(() => {
    console.log(selectedTodo);
  }, [selectedTodo]);
  const onIncrementclicked = (e) => {
    e.preventDefault();
    dispatch(increment());
  };
  const onDecrimentclicked = (e) => {
    e.preventDefault();
    dispatch(decriment());
  };
  return (
    <div>
      {selectedAdds.map((add) => (
        <div key={add.id}>
          <div> {add.addname}</div>
          <div> {add.price}</div>
          <button onClick={onIncrementclicked()}>{selectedTodo}</button>
          <button onClick={onDecrimentclicked()}>{selectedTodo}</button>
        </div>
      ))}
    </div>
  );
};

export default Addtocart;

我的 redux 切片如下

import { createSlice } from '@reduxjs/toolkit';


export const addtoSlice = createSlice({
    name: 'addto',
    initialState: {
        currentamount: 0
    },
    reducers: {
        increment: state => {
            state.curentamount++
        },
        decriment: state => {
            state.currentamount--
        },
    },
});

export const { increment, decriment } = addtoSlice.actions;

export const selectadto = state => state.addto.currentamount;

export default addtoSlice.reducer;

下面是错误信息

  TypeError: Cannot read property 'preventDefault' of undefined
onIncrementclicked
src/Addtocart.js:17
  14 |   console.log(selectedTodo);
  15 | }, [selectedTodo]);
  16 | const onIncrementclicked = (e) => {
> 17 |   e.preventDefault();
     | ^  18 |   dispatch(increment());
  19 | };
  20 | const onDecrimentclicked = (e) => {

Answer 1

在 const selectadto = useSelector(selectadto); 中，您在使用名为 selectadto 的缩减程序时声明了一个名为 selectadto 的新变量。您可能应该给两者之一起不同的名称。

react/redux 应用程序 - 从 redux 切片获取操作以响应组件时出现问题

react/redux app - issue when getting actions from redux slice to react component

ecmascript-6

reactjs

redux

react-redux

redux-toolkit