react-redux 相关问题

将 RTK 查询与实体适配器和 TypeScript 结合使用

这是我的store.ts的代码： 从“@reduxjs/toolkit”导入{configureStore}； 从“./api/apiSlice”导入{ apiSlice }； 从“re...

在自定义 serviceWorker 中调度 redux 操作

我想对从服务器收到的推送执行操作。我有一个自定义服务工作者，它具有用于推送的事件侦听器。现在我想在收到来自服务的推送时分派 redux 操作...

未捕获（承诺中）类型错误：调度不是连接中的函数

我正在使用 redux、react-redux 和 React 构建一个应用程序。当我与组件连接并进行操作调用时，我收到一个 Uncaught (in Promise) TypeError: sendLoginRequest is not a

我应该将此函数包装在 useCallback 中吗？

我对 useCallback 的工作原理有相当不错的理解。不过，对于我和我的同事来说，弄清楚何时使用它似乎是主观的。我很好奇其他人的想法...

s3 中托管的 React 应用程序在部署后不会更新

我有一个使用 CloudFront 托管在 S3 上的网站。我已经部署了几次并工作，但现在部署后它不会更新 s3 存储桶。我已经使用 npm 审计修复来检查依赖关系和

安全存储用户访问令牌的最佳实践

我目前正在开发一个基于医疗健康的系统，前端使用nextjs，后端使用Django。在我的应用程序中，我使用 React-Redux 在成功后存储用户访问令牌...

使用 React hooks 获取输入值以在 oMdb api 上搜索

我想使用 React Hooks 通过 oMdb api 进行电影搜索。 结果并不如预期。我似乎违反了一些我不明白的 React Hooks 规则。 这是代码。 挂钩搜索 H...

是否可以在不使用connect()的情况下使用redux-form？

由于各种不属于我的原因，在我的工作应用程序中，我们使用 redux 而不使用 connect HOC。这里有优点也有缺点。但是是否可以以这种方式使用 redux-form，目前...

如何消除这个错误？ redux-persist 无法创建同步存储。回到 noop 存储

我添加了 redux-persist 以便刷新后状态仍然存在。 但我在终端中不断收到此错误： ✓ 599ms 内编译/发布（3066 个模块） redux-persist 无法创建同步...

TypeScript：依赖于另一个接口属性

是否可以输入依赖于另一个接口属性的接口属性？ 例如我有： 常量对象 = { 富：'你好'， 栏：{你好：'123'，}， } 我想确保酒吧的钥匙必须......

React Native 的动态导入路径

我想做的是导入React Native动态路径。 例子 ：- 从 ./screens/${path} 导入演示； 目前我找到了一种使用懒惰的方法。但它也只有在初始化 const var 时才有效...

React-Redux 使用 useSelector 时找不到 Redux 上下文值

我创建了一个商店和 authreducer，一切都按预期工作 但是当我在 app.js 中添加 useSelector 时，出现此错误： ERROR错误：找不到react-redux上下文值；请确保...

不变违规：在路径中的调度之间检测到状态突变

我想将数组中的一项与另一项连接起来，并从数组中删除第二项。当我尝试旧方法时，出现状态突变检测错误。当我尝试 Obj 时...

Redux Toolkit 查询 (RTKQ) 端点失效和重新验证多次触发

作为序言，我查看了 Redux-Toolkit 文档，但没有通过注入端点和代码分割找到这个问题的答案。我不知道这是否是一个错误，但是...

如何使用选项卡导航器将道具传递到 Screen 组件？

这是我在 StackOverflow 上的第一篇文章，如果我没有遵循正确的格式，请道歉。 我正在使用 React Navigation v 5.x 中的选项卡导航器构建我的第一个应用程序，但遇到了一个大问题

我尝试实现用户验证的 redux 存储和操作出了什么问题？

我有 ButtonRegistration 组件，在按下注册按钮后我实现了一项工作。当用户按下按钮时，会出现带有输入字段的模式，用户可以输入...

升级到 React 18 后 React App 未渲染

`我的 React 应用程序运行良好，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。 在终端中，我得到： webpack 编译成功 但在 chrome 控制台中...

如何处理ReactJS中按钮点击的导航？

我正在实施一个新的应用程序。目前，我可以对链接进行导航，但无法对按钮单击导航进行导航。我已经检查了这篇文章并尝试使用 BrowserHistory 选项...

React OnClick 事件行为是意外的

产品卡 函数 ProductCard ({图像, 名称, 统计信息, id}){ 让调度 = useDispatch() 让数量 = 1 返回 （ <> 产品卡 function ProductCard ({image, name, stats, id}){ let dispatch = useDispatch() let quantity = 1 return ( <> <div className="product-card"> <div className="product-image-wrapper"> <img src={image} alt="" /> </div> <div className="image-metadata"> <div className="data-wrapper"> <div className="product-details"> <div className="product-category">{stats.category}</div> <div className="product-name">{name}</div> </div> <div className="action-btn-wrapper"> <div className="add-to-cart" onClick={()=>{ dispatch(addToCart({name,image,stats,id,quantity})) } }> <img src={addToCartIcon} alt="" /> </div> </div> </div> </div> </div> </> ) } CART 组件 import React, { useEffect } from "react"; import Header from "../components/header"; import Footer from "../components/footer"; import Checkout from "../components/checkout"; import { useSelector } from "react-redux"; function Cart (){ let cartCount = useSelector(state => state.cart.cart) useEffect(()=>{ document.title = `TRAX- Cart(${cartCount.length} Items)` },[cartCount]) return ( <> <Header/> <Checkout/> <Footer/> </> ) } export default Cart; 结帐组件 import React from "react"; import cartImage from '../assets/website-icons/9026048_shopping_cart_simple_icon.svg' import productImage from '../assets/featured/chair-model.jpg' import arabicImage from '../assets/featured/arabic-model.jpg' import { useSelector } from "react-redux"; import CartItem from "../widgets/cartItem"; function Checkout(){ let cartCount = useSelector(state => state.cart.cart) return ( <div className="cart-wrapper"> <div className="cart-page-icon"> <div className="icon-container"> <img src= {cartImage} alt="Shopping Cart Icon" /> {/* CART */} </div> </div> <div className="mini-slogan-wrapper"> Shop for upto $200 to enjoy<span>FREE SHIPPING</span>. </div> <div className="cart-table-content"> <div className="cart-table"> <div className="table-cell header-cell"> <div className="table-col-1">Product</div> <div className="table-col-2">Quantity</div> <div className="table-col-3">Price</div> <div className="table-col-4">Subtotal</div> </div> { cartCount.map(({name,image,stats,id,quantity}) => { return <CartItem id={id} productImage={image} quantity={quantity} productStats={{category : stats.category, color : stats.color}} productName={name}/> }) } {/* <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color: Red, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$300</div> <div className="table-col-4">$300</div> </div> <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={arabicImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Arabic Scarf - Embroidery Print</div> <div className="product-extras">Color: Mehroon, Size : Standard, Fabric : Linen</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$120</div> <div className="table-col-4">$120</div> </div> */} </div> <div className="checkout-container"> <div className="checkout-heading"> Cart Summary </div> <div className="selection-group"> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-ball"></div> </div> <div className="selection-value">Regular Shipping</div> <div className="selection-cost">$12.00</div> </div> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-balls"></div> </div> <div className="selection-value">Express Shipping</div> <div className="selection-cost">20.00</div> </div> </div> <div className="checkout-secondary-row" id="checkout-subtotal"> <div className="heading-secondary-row">Subtotal</div> <div className="cost-secondary-row">$420</div> </div> <div className="checkout-secondary-row" id="checkout-tax"> <div className="heading-secondary-row">Tax</div> <div className="cost-secondary-row">$10</div> </div> <div className="checkout-total" id="checkout-total" > <div className="heading-total">Total</div> <div className="cost-total">$430</div> </div> <div className="checkout-btn">Checkout</div> </div> </div> </div> ) } export default Checkout; 购物车商品组件 import React from "react"; import decrementor from '../assets/website-icons/decrementor.svg' import incrementor from '../assets/website-icons/incrementor.svg' import { useDispatch } from "react-redux"; import { removeFromCart,incrementQty,decrementQty } from "../state-manager/Slices/cartSlice"; function CartItem ({productImage,productName, productStats,id,quantity}){ let dispatch = useDispatch() return ( <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color:{productStats.color}, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn" onClick={()=>{ dispatch(removeFromCart({productImage,productName,productStats,id})) }}>Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor" onClick={()=>{ dispatch(decrementQty({id})) }}> <img src={decrementor} alt="" /> </div> <div className="quantity-value">{quantity}</div> <div className="incrementor" onClick={()=>{ dispatch(incrementQty({id})) }}> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">${300}</div> <div className="table-col-4">${quantity * 300}</div> </div> ) } export default CartItem; 卡片切片 import { createSlice } from "@reduxjs/toolkit" let CartSlice = createSlice({ name : 'Cart', initialState : { cart : [], checkoutTotal : 0 }, reducers : { addToCart : (state,action)=>{ if(state.cart.length < 1){ state.cart = [...state.cart, action.payload] }else { state.cart.map(item => { if(item.id == action.payload.id){ item.quantity++; }else { state.cart = [...state.cart, action.payload] } }) } }, removeFromCart : (state,action)=>{ state.cart.map((item, index, cartItemArray) =>{ if(item.id == action.payload.id){ let rar = cartItemArray.splice(index,1) console.log(rar) } }) }, incrementQty : (state,action)=>{ state.cart.map(item =>{ console.log(action.payload) if(item.id == action.payload.id){ item.quantity = item.quantity + 1 } }) }, decrementQty : (state,action)=>{ state.cart.map(item =>{ if(item.id == action.payload.id){ if(item.quantity > 0){ item.quantity = item.quantity - 1 }else { console.log('its already nulled out') } } }) } } }) export default CartSlice.reducer export const {addToCart,removeFromCart, incrementQty,decrementQty} = CartSlice.actions 我正在使用 redux 进行状态管理，每当我添加到购物车时，第三次单击时，购物车计数开始加倍，例如从 2 到 4，从 4 到 6 等等，我已经尝试了很多，但我不能我的头围绕着它。请让我知道我做错了什么？ 发生这种情况是因为您循环遍历购物车中的所有商品，并且对于每个商品，您将整个购物车附加到 cart 中。 您需要做的是将现有商品替换为相同商品但数量不同。像这样的东西： state.cart.map(item => item.id == action.payload.id ? {...item, quantity: item.quantity + 1 } : item); 我无法测试代码，但我希望它至少能帮助您找出问题。 如果这有帮助，请告诉我。

使用 React Router 中的 CreateBrowserRouter 和 Redux 存储

尝试在react博客项目中实现redux和react router，其中我从api获取数据并存储在redux中；但是，它没有被渲染，也没有给出错误 我尝试了以下...