React调用useDispatch触发action报TypeError: Object(...) is not a function如何解决

错误原因 #

报错的核心是setSearchTerm没有被正确生成可用的action函数，存在两个问题：

1. createSlice的配置字段拼写错误：配置项应为复数形式的reducers，你写为单数的reducer，导致框架没有正常生成对应的action creator
2. 状态更新逻辑和初始值定义不匹配：你的初始状态是字符串类型的空值，但更新逻辑里尝试给状态挂载search属性，无法正确完成状态更新

修复方案 #

直接修改searchSlice代码即可，修正后代码如下：

import {createSlice} from "@reduxjs/toolkit";

export const searchSlice = createSlice({
  name: 'search',
  initialState: '',
  // 修正为复数reducers
  reducers: {
    // 基础类型状态直接返回新值即可
    setSearchTerm: (state, action) => action.payload,
  }
});

export const {setSearchTerm} = searchSlice.actions;

export const selectSearchTerm = (state) => state.search;

export default searchSlice.reducer;

修改完成后重启开发服务，输入框内容更新状态的逻辑就可以正常运行。

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