(React) useDispatch TypeError: Object(...) is not a function handleChange

Question

我正在做一个简单的 React 应用程序，任何用户在输入文本中引入一个文本，它会自动更新商店中的状态。这是非常简单的 React 实践，但我对这个错误感到非常挣扎和沮丧，因为我尝试了所有方法，但我仍然遇到同样的问题。

我正在使用“react-redux”和“@reduxjs/toolkit”依赖项。我尝试了一切，我检查并比较了类似示例和类似问题的解决方案，我从头开始重新制作应用程序以确保不同版本的依赖项没有任何问题，并且我让我的代码非常简单，试图让有用，但没用。

希望大家给我一个建议或解决方案。谢谢！！

错误

TypeError: Object(...) is not a function
handleChange
C:/Users/Ruben/Desktop/Projects/React/reddit2/reddit/src/features/search/SearchBar.js:14
  11 | 
  12 | 
  13 |  const handleChange = (e) => {
> 14 |    dispatch(setSearchTerm(e.target.value))
     | ^  15 |  }
  16 | 
  17 | 
View compiled
▶ 19 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

这些是文件：

SearchBar 组件

import React from "react";
import {useDispatch, useSelector} from "react-redux";
import {setSearchTerm, selectSearchTerm} from "../search/searchSlice";


export const SearchBar = () => {
  
  
  const dispatch = useDispatch();
  const term = useSelector(selectSearchTerm);


  const handleChange = (e) => {
    dispatch(setSearchTerm(e.target.value))
  }


  return(
    <div>
      <input
        id="search"
        type="text"
        value={term}
        onChange={handleChange}
        placeholder="Introduce your Topic"
        />
    </div>
  );
};

searchSlice

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


export const searchSlice = createSlice({
  name: 'search',
  initialState: '',
  reducer: {
    setSearchTerm: (state, action) => {state.search = action.payload},
  }
});

export const {setSearchTerm} = searchSlice.actions;

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

export default searchSlice.reducer;

商店

import {configureStore} from "@reduxjs/toolkit";
import searchReducer from "../features/search/searchSlice";

export default configureStore({
  reducer: {
    search: searchReducer,
  },
});

索引

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import './index.css';
import App from '../src/App/App';
import reportWebVitals from './reportWebVitals';
import store from "../src/App/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>  
  </React.StrictMode>,
  document.getElementById('root')
);

Package.json

{
  "name": "reddit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

Answer 1

问题

您在 createSlice 中输入错误，正确的键是 reducers，带有“s”，而不是 reducer。这导致切片操作实际上未定义。
您的状态不太正确。它不是可草拟的对象。

解决方案

更正 reducer 键并提供正确的状态。

export const searchSlice = createSlice({
  name: "search",
  initialState: { search: "" }, // <-- object state
  reducers: {
    setSearchTerm: (state, action) => {
      state.search = action.payload; // <-- update property
    }
  }
});

export const { setSearchTerm } = searchSlice.actions;

export const selectSearchTerm = (state) => state.search.search; // <-- select property

export default searchSlice.reducer;

(React) useDispatch TypeError: Object(...) is not a function handleChange

(React) useDispatch TypeError: Object(...) is not a function handleChange

typeerror

reactjs

redux

react-redux

redux-toolkit

问题

解决方案