React Redux使用useSelector、useDispatch映射按钮数组时dispatch不生效问题

核心问题列表 #

• Redux reducer 赋值逻辑错误：你在 reducer 中直接写 state = action.payload 属于对局部state变量的重新赋值，并不会修改Redux存储的真实状态，同时你的初始state是按钮数组，但payload是单个按钮的属性对象，直接替换整个数组逻辑不成立。
• prepare参数与dispatch传参不匹配：你定义的updateButtonsData的prepare函数要求传入id、newPrevPageNo等6个参数，但你实际dispatch时只传入了包含newDirection的对象，参数完全不匹配，生成的payload不符合预期。
• dispatch触发时机错误：你把dispatch逻辑写在了组件渲染的map循环中，每次组件渲染都会触发dispatch，dispatch修改状态后又会触发重渲染，会直接造成死循环，点击逻辑应该绑定到按钮的onClick事件中，而不是渲染时执行。
• useSelector取值路径错误：你的slice name配置为ui，默认状态挂载在state.ui下，你写的state.buttons无法正确获取按钮数组，如果你在store注册reducer时自定义了key为buttons，可忽略该问题。

修正后的代码 #

1. buttonSlice 修正 #

const initialState = [
  {
    id: 'homeId',
    prevPageNo: null,
    pageNo: 1,
    direction: 1,
    firstAnimFrame: 1,
    lastAnimFrame: 1,
  },
  {
    id: 'aboutId',
    prevPageNo: null,
    pageNo: 2,
    direction: 1,
    firstAnimFrame: 1,
    lastAnimFrame: 11,
  },
  // 其余按钮配置
]

const buttonsSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    updateButtonsData: (state, action) => {
      // 找到对应id的按钮，合并更新属性
      const targetButton = state.find(item => item.id === action.payload.id)
      if (targetButton) {
        Object.assign(targetButton, action.payload)
      }
    }
  }
})

export const { updateButtonsData } = buttonsSlice.actions
export default buttonsSlice.reducer

2. NavMenu 组件修正 #

function NavMenu() {
  // 若store注册reducer时key为buttons，改回state.buttons即可
  const buttons = useSelector((state) => state.ui);
  const dispatch = useDispatch();

  const handleButtonClick = (button) => {
    const newDirection = button.pageNo >= button.prevPageNo ? 1 : -1
    // 传入需要更新的所有参数，必须携带id匹配目标按钮
    dispatch(updateButtonsData({
      id: button.id,
      direction: newDirection,
      // 其余需要更新的参数按需添加
    }))
  }

  const navButtons = buttons.map((button) => {
    return (
      <li key={button.id} >
          {/* 把点击事件传给NavButton内部绑定到按钮dom上 */}
          <NavButton buttonData={button} onBtnClick={() => handleButtonClick(button)} />
      </li>
    );
  });

  return <ul>{navButtons}</ul>;
}

export default NavMenu;

额外说明 #

如果需要记录上一次点击的按钮，建议单独在state里加一个lastClickedId字段存储上一次点击的按钮id，点击时先拿上一次的按钮数据计算方向，再更新当前按钮和lastClickedId即可，无需依赖每个按钮自身的prevPageNo字段维护状态，逻辑会更清晰。

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