Redux dispatch触发action报错Actions must be plain objects

你遇到的Actions must be plain objects报错、reducer拿不到数据的核心原因是Action Creator语法错误，同时还存在Reducer初始状态类型不匹配的隐患：

• 箭头函数后直接跟大括号时，JS会将其识别为函数的代码执行块，而非要返回的对象字面量。你写的sendData函数没有显式return值，调用后实际返回undefined，dispatch接收到非普通对象的入参就会抛出对应错误，自然也不会走到reducer逻辑里。
• Reducer初始值定义为空数组，但是更新分支返回的是对象，前后数据结构不一致，即使action正常触发也会导致状态读取异常。

修正Action Creator写法 #

给要返回的action对象外层包裹小括号，让箭头函数隐式返回对象，或者显式添加return语句，保证函数调用后返回合法的普通action对象：

// 写法1：隐式返回（更简洁）
export const sendData = (data) => ({
  type: ADD_DATA,
  data
})

// 写法2：显式return
export const sendData = (data) => {
  return {
    type: ADD_DATA,
    data
  }
}

修复后调用sendData(data)会正常返回带type和data字段的普通对象，符合Redux对action的格式要求。

统一Reducer的状态结构 #

把Reducer的初始值改成和更新逻辑匹配的对象结构，避免前后类型不一致导致的异常：

// 定义和返回结构一致的初始状态
const initialState = {
  data: null
}

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_DATA:
      return {
        ...state,
        data: action.data
      }
    default:
      return state;
  }
}

验证状态读取 #

修复完成后，点击按钮触发dispatch，useSelector就能正常拿到更新后的状态：

// 直接解构取需要的data字段即可
const { data } = useSelector(state => state.dataReducer);
console.log(data); // 可以正常打印dispatch传入的data值

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