useReducer：派发动作，在其他组件中显示状态，并在动作被派发时更新状态

Question

我有一个我无法解决的问题。我正在构建一个电子商务反应应用程序并使用useReducer 和useContext 进行状态管理。客户打开一个产品，选择项目数量，然后单击“添加到购物车”按钮，该按钮调度一个操作。这部分运行良好，问题开始了。我不知道如何在Navbar.js 组件中显示和更新购物车中的产品总数。它在路线更改后显示，但我希望它在单击“添加到购物车”按钮时更新。我试过 useEffect 但它不起作用。

初始状态是这样的

const initialState = [
  {
    productName: '',
    count: 0
  }
]

AddToCart.js 效果很好

import React, { useState, useContext } from 'react'
import { ItemCounterContext } from '../../App'

function AddToCart({ product }) {
  const itemCounter = useContext(ItemCounterContext)
  const [countItem, setCountItem] = useState(0)

  const changeCount = (e) => {
    if (e === '+') { setCountItem(countItem + 1) }
    if (e === '-' && countItem > 0) { setCountItem(countItem - 1) }
  }

  return (
    <div className='add margin-top-small'>
      <div
        className='add-counter'
        onClick={(e) => changeCount(e.target.innerText)}
        role='button'
      >
        -
      </div>

      <div className='add-counter'>{countItem}</div>

      <div
        className='add-counter'
        onClick={(e) => changeCount(e.target.innerText)}
        role='button'
      >
        +
      </div>
      <button
        className='add-btn btnOrange'
        onClick={() => itemCounter.dispatch({ type: 'addToCart', productName: product.name, count: countItem })}
      >
        Add to Cart
      </button>
    </div>
  )
}

export default AddToCart

Navbar.js 是我遇到问题的地方

import React, { useContext } from 'react'
import { Link, useLocation } from 'react-router-dom'
import NavList from './NavList'
import { StoreContext, ItemCounterContext } from '../../App'
import Logo from '../Logo/Logo'

function Navbar() {
  const store = useContext(StoreContext)
  const itemCounter = useContext(ItemCounterContext)
  const cartIcon = store[6].cart.desktop
  const location = useLocation()
  const path = location.pathname

  const itemsSum = itemCounter.state
    .map((item) => item.count)
    .reduce((prev, curr) => prev + curr, 0)

  const totalItemsInCart = (
    <span className='navbar__elements-sum'>
      {itemsSum}
    </span>
  )

  return (
    <div className={`navbar ${path === '/' ? 'navTransparent' : 'navBlack'}`}>
      <nav className='navbar__elements'>
        <Logo />
        <NavList />
        <Link className='link' to='/cart'>
          <img className='navbar__elements-cart' src={cartIcon} alt='AUDIOPHILE CART ICON' />
          {itemsSum > 0 ? totalItemsInCart : null}
        </Link>
      </nav>
    </div>
  )
}

export default Navbar

Answer 1

问题出在您的 reducer 中，尤其是在您将先前的状态分配给 newState 以进行突变并返回更新状态的情况下。在 JavaScript 中，非原始对象是通过地址而不是值来引用的。由于您的数组 initialState 恰好是非原始数组，因此当您将非原始数组分配给新变量时，该变量仅指向内存中的现有数组，不会创建新副本。而且，只有在重建状态时才会触发/广播更新（这就是 React 理解存在更新的方式）而不是软突变。当您变异并返回newState 时，您基本上是在变异现有的state 而不会导致它重建。一个快速的解决方法是将您的state 复制到newState 而不仅仅是分配它。这可以使用扩展运算符 (...) 来完成。
在您的 reducer 函数中，更改：

const newState = state

到

const newState = [...state]

你的 reducer 函数应该如下所示：

export const reducer = (state, action) => {
  // returns -1 if product doesn't exist
  const indexOfProductInCart = state.findIndex((item) => item.productName === action.productName)
  const newState = [...state] //Deep-copying the previous state

  switch (action.type) {
    case 'increment': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: state.count + 1 }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: state.count + 1 }
      return newState
    }
    case 'decrement': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: state.count - 1 }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: state.count - 1 }
      return newState
    }
    case 'addToCart': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: action.count }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: action.count }
      return newState
    }
    case 'remove': return state.splice(indexOfProductInCart, 1)
    default: return state
  }
}

Answer 2

看来你正在改变你的 reducer 函数中的 state 对象。您首先使用const newState = state 保存对状态的引用，然后使用每个newState[state.length] = ..... 改变该引用，然后使用return newState 为下一个状态返回相同的状态引用。下一个状态对象绝不是 new 对象引用。

考虑以下使用各种数组方法对state 数组进行操作并返回新 数组引用：

export const reducer = (state, action) => {
  // returns -1 if product doesn't exist
  const indexOfProductInCart = state.findIndex(
    (item) => item.productName === action.productName
  );

  const newState = state.slice(); // <-- create new array reference

  switch (action.type) {
    case 'increment': {
      if (indexOfProductInCart === -1) {
        // Not in cart, append with initial count of 1
        return newState.concat({
          productName: action.productName,
          count: 1,
        });
      }
      // In cart, increment count by 1
      newState[indexOfProductInCart] = {
        ...newState[indexOfProductInCart]
        count: newState[indexOfProductInCart].count + 1,
      }
      return newState;
    }

    case 'decrement': {
      if (indexOfProductInCart === -1) {
        // Not in cart, append with initial count of 1
        return newState.concat({
          productName: action.productName,
          count: 1,
        });
      }
      // In cart, decrement count by 1, to minimum of 1, then remove
      if (newState[indexOfProductInCart].count === 1) {
        return state.filter((item, index) => index !== indexOfProductInCart);
      }
      newState[indexOfProductInCart] = {
        ...newState[indexOfProductInCart]
        count: Math.max(0, newState[indexOfProductInCart].count - 1),
      }
      return newState;
    }

    case 'addToCart': {
      if (indexOfProductInCart === -1) {
        // Not in cart, append with initial action count
        return newState.concat({
          productName: action.productName,
          count: action.count,
        });
      }
      // Already in cart, increment count by 1
      newState[indexOfProductInCart] = {
        ...newState[indexOfProductInCart]
        count: newState[indexOfProductInCart].count + 1,
      }
      return newState;
    }

    case 'remove':
      return state.filter((item, index) => index !== indexOfProductInCart);

    default: return state
  }
}

Navbar 中的itemsSum 现在应该会从上下文中看到状态更新。

const itemsSum = itemCounter.state
  .map((item) => item.count)
  .reduce((prev, curr) => prev + curr, 0);

您似乎还记住了 useMemo 钩子中的 state 值和一个空的依赖数组。这意味着传递给StoreContext.Provider 的counter 值永远不会更新。

function App() {
  const initialState = [{ productName: '', count: 0 }];
  const [state, dispatch] = useReducer(reducer, initialState);

  const counter = useMemo(() => ({ state, dispatch }), []); // <-- memoized the initial state value!!!

  return (
    <div className='app'>
      <StoreContext.Provider value={store}> // <-- passing memoized state
        ...
      </StoreContext.Provider>
    </div>
  )
}

将state添加到依赖数组中

const counter = useMemo(() => ({ state, dispatch }), [state]);

或者根本不记住它并将state和dispatch传递给上下文value

<StoreContext.Provider value={{ state, dispatch }}>
  ...
</StoreContext.Provider>

Answer 3

嗯，ItemCounterContext对于这个问题很重要，忽略StoreContext，它是用于图像的……这里有一个reducer函数。

export const reducer = (state, action) => {
  // returns -1 if product doesn't exist
  const indexOfProductInCart = state.findIndex((item) => item.productName === action.productName)
  const newState = state

  switch (action.type) {
    case 'increment': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: state.count + 1 }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: state.count + 1 }
      return newState
    }
    case 'decrement': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: state.count - 1 }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: state.count - 1 }
      return newState
    }
    case 'addToCart': {
      if (indexOfProductInCart === -1) {
        newState[state.length] = { productName: action.productName, count: action.count }
        return newState
      }
      newState[indexOfProductInCart] = { productName: action.productName, count: action.count }
      return newState
    }
    case 'remove': return state.splice(indexOfProductInCart, 1)
    default: return state
  }
}

这里是 App.js，我在其中与其他组件共享状态

import React, { createContext, useMemo, useReducer } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar/Navbar'
import Homepage from './pages/Homepage/Homepage'
import Footer from './components/Footer/Footer'
import ErrorPage from './pages/ErrorPage/ErrorPage'
import SelectedCategory from './pages/SelectedCategory/SelectedCategory'
import SingleProduct from './pages/SingleProduct/SingleProduct'
import ScrollToTop from './services/ScrollToTop'
import store from './services/data.json'
import { reducer } from './services/ItemCounter'
import './scss/main.scss'

export const StoreContext = createContext(store)
export const ItemCounterContext = createContext()

function App() {
  const initialState = [{ productName: '', count: 0 }]
  const [state, dispatch] = useReducer(reducer, initialState)
  const counter = useMemo(() => ({ state, dispatch }), [])

  return (
    <div className='app'>
      <StoreContext.Provider value={store}>
        <ItemCounterContext.Provider value={counter}>
          <Router>
            <ScrollToTop />
            <Navbar />
            <Routes>
              <Route path='/' element={<Homepage />} />
              <Route path='/:selectedCategory' element={<SelectedCategory />} />
              <Route path='/:selectedCategory/:singleProduct' element={<SingleProduct />} />
              <Route path='*' element={<ErrorPage />} />
            </Routes>
            <Footer />
          </Router>
        </ItemCounterContext.Provider>
      </StoreContext.Provider>
    </div>
  )
}

export default App

Answer 4

我确切地知道你在说什么，但 reducer 的问题是只有可变方法适用于状态。 .slice()、.concat() 甚至扩展运算符 [...state] 等不可变方法不起作用，我不知道为什么 :( 我尝试了两个答案，但 dispatch(action) 并没有改变状态。也许初始状态是问题，我会试着把它说成这样

初始状态 = { 购物车：[ 产品名称： ''， 计数：0 ] }