如何正确更新reducer

Question

在我最初的状态下，我有板，将它们视为聊天室中的组。 setboard 是一个变量，用于在房间之间切换使用

activeBoard. =>

activeBoard: state.boards[initialState.setBoard],

I map the content of debates easily. The problem comes when I try to update the reducer.

const initialState = {
    setBoard: 'Feed',
    boards : {
        Feed: {
            id: 1,
            debates: [
                {
                    id: 1,
                    text: 'This is the most amazing website on the internet.",
                    Images: 'soul.jpg',
                },
                {
                    id: 2,
                    topic: 'Somebody tell him to shut up',
                    text: "This is the most amazing website on the internet.",
                    Images: 'salt.jpg',
                },
            ],
            invitations: [
                {
                    id: 1,
                    nickname: "imhotep",
                    inviteText: ' BLOCKING People block or unfriend their parents on Facebook 
                },
            ],
     }
export const BoardProvider = ({ children}) =>{
    const [state, dispatch] = useReducer(BoardReducer, initialState) 

    function AddDebates(debates){
        dispatch({
            type: 'Add-debates',
            payload: debates
        })
    }
return ( <BoardContext.Provider value={{
        boards: state.boards,
        
        activeBoard: state.boards[initialState.setBoard],
        debates: activeBoard.debates,
        AddDebates
    }}>
        {children}
    </BoardContext.Provider>)
}

This is my reducer.

export default ( state, action, activeBoard, debates,invitations) =>{
    switch(action.type) {
       case 'Add-debates':
            return { 
                ...state, 
                debates: [action.payload, ...debates]
            }
  default: 
            return state
          
    }
}

我收到一个错误：TypeError：debates is not iterable 我可以通过简单地映射它来呈现辩论，但可以通过这种方式更新减速器。一些帮助请...

Answer 1

您需要将 所有 级别的状态从根目录浅复制到您正在更新的 debates，因为它嵌套了几个级别。正确的引用还将包括该属性的完整路径，即state.debates 未定义且不可可迭代。

case 'Add-debates':
  return { 
    ...state, 
    boards: {
      ...state.boards,
      Feed: {
        ...state.boards.Feed,
        debates: [action.payload, ...state.boards.Feed.debates],
      },
    },
  }