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

Question

I'm doing a simple React app where any user introduce a text in the input text, and automatedly it will update the state in the store. It is very simple practice of React but I'm getting very struggle and frustrated with this error because I tried everything but I'm still having the same problem.

I am using "react-redux" and "@reduxjs/toolkit" dependencies. I tried everything, I checked and compare similar examples and solutions to similar problems, I remade the app from the scratch just to make sure that there is not any problem with different versions of the dependencies, and I keep my code very simple trying to make it work, but it doesn't.

I hope any of you could give me an advice or solution. Thank You!!

Error

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.

Those are the files:

SearchBar Component

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;

Store

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

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

Index

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"
  },

There are multiple things to debug. onChange={(e)=>handleChange(e.target.value)} , const handleChange = (value) => { dispatch(setSearchTerm(value)) } . Read about synthetic events. Can you add code for setSearchTerms? — Anglesvar
– Anglesvar, Commented Jun 4, 2021 at 18:20
Thank you for your comment Anglesvar, but still the same problem. setSearchTerm is the action creator of the searchSlice reducer, the file is posted. — Ruben Gonzalez
– Ruben Gonzalez, Commented Jun 4, 2021 at 18:38
setSearchTerm is actually taking two parameters according to your code. (state, action) . So this is the reason the error is thrown. I would suggest you to look into action, reducer, store concept thoroughly. Hope it help! — Anglesvar
– Anglesvar, Commented Jun 4, 2021 at 18:48
@Anglesvar setSearchTerm is the name of the reducer function in the slice, which does take the normal state and action arguments, however redux-toolkit builds action creator functions for export (i.e. searchSlice.actions), which take only a single argument (i.e. payload) by default. — Drew Reese
– Drew Reese, Commented Jun 4, 2021 at 18:59
Thank you Anglesvar, but I had a second look, and it looks right the code, I don't know what I'm missing. Thank you @DrewReese for your comment as well. — Ruben Gonzalez
– Ruben Gonzalez, Commented Jun 4, 2021 at 19:09

Drew Reese · Accepted Answer · 2021-06-04 19:36:00Z

1

Issues

You've a typo in the createSlice, the proper key is reducers, with an "s", not reducer. This is causing the slice actions to actually be undefined.
Your state isn't quite correct. It's not a draftable object.

Solution

Correct the reducer key and provide correct state.

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;

edited Jun 4, 2021 at 19:36

answered Jun 4, 2021 at 19:26

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruben Gonzalez Over a year ago

Thank You very much, Drew Reese, finally after the whole day trying, changing, looking...., you fixed my problem, thank you very much not only for fixing my problem, I wasn't sure about the initial state has to be an object, and I never will forget to put an 's' again in reducers........:P

Collectives™ on Stack Overflow

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

1 Answer 1

Issues

Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issues

Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related