Redux Toolkit状态更新后UI未同步渲染问题排查

你遇到的现象本质是两个低级错误叠加导致的：

• UI不更新的直接原因：AllInvoices组件渲染列表时，遍历的是从文件直接导入的静态常量INVOICES_LIST，完全没有读取Redux store中存储的状态。这个静态常量只在store初始化时被当作初始值用了一次，后续你在reducer里修改的是store内部拷贝的状态，和这个外部导入的静态数组没有任何关系，静态数组本身从来没被修改过，UI当然不会变。
• useSelector取数报map is not a function的原因：你取数的路径写错了。你的invoice切片name属性设的是"invoice"，切片内部初始状态的结构是{ invoices: 数组 }，所以store中发票数组的正确路径是state.invoice.invoices，你之前写的state.invoices取到的是undefined，对undefined调用map方法自然会报错。

1. 先确认store配置正确，configureStore中invoice切片的挂载key和切片name保持一致，参考配置：

import { configureStore } from '@reduxjs/toolkit'
import invoiceSlice from './store/invoice-slice'
import uiSlice from './store/ui-slice'

export const store = configureStore({
  reducer: {
    invoice: invoiceSlice.reducer,
    ui: uiSlice.reducer
  }
})

2. 修改AllInvoices.js的取数和渲染逻辑：

• 把之前注释的useSelector代码改成正确的取数路径：

// 替换之前错误的const invoice = useSelector((state) => state.invoices);
const invoices = useSelector((state) => state.invoice.invoices);

• 把tbody部分遍历静态数组的代码，换成遍历从store取到的invoices数组，同时把列表key从数组索引换成发票id，避免列表增删时出现渲染异常：

<tbody>
  {invoices.map((invoice) => (
    <Invoice
      key={invoice.id}
      invoiceItem={{
        id: invoice.id,
        invoice_num: invoice.invoice_num,
        bill_from: invoice.bill_from,
        bill_to: invoice.bill_to,
        status: invoice.status,
      }}
    />
  ))}
</tbody>

• 静态列表INVOICES_LIST里的id用Math.random().toString()生成，每次模块热重载、页面刷新时id都会重新生成，很容易出现删除时id匹配不上的问题，练手阶段建议直接写死固定字符串id。
• addNewInvoice reducer里写入store的字段名和初始列表的字段名不统一，比如你存的是billFrom、billTo，但初始列表用的是bill_from、bill_to，后续渲染新增发票时会出现字段取不到值的问题，记得统一字段命名。

内容的提问来源于stack exchange，提问作者Stepan Slyvka