Ошибка неперехваченного типа: Объект(…) не является функцией (react-redux с шаблоном react)

#javascript #reactjs #react-redux #redux-toolkit #react-boilerplate

Вопрос:

у меня возникла ошибка при попытке использовать reduxjs/инструментарий в моем приложении react с использованием шаблона react. я несколько раз просматривал свой код и все еще не могу найти проблему.

у меня есть данные хранилища, видимые в инструменте разработчика redux.

эта ошибка возникает только тогда, когда я объявляю хук useDispatch и useSelector

Состояние доступа

 import React from "react"; import Address from "../../services/getAddress"; import { StyledHero } from "./style";  import af from "../../assets/Hero/yellow-removebg-preview 1.svg";  import useAppForm from "../../Hooks/useForm"; import { Input, Button } from "../../components"; import { useDispatch, useSelector } from "react-redux";  const Hero = () =gt; {  const { register, errors, handleSubmit } = useAppForm(); Line Of Error,  const code = useSelector(state =gt; state.trackCode.code);  const dispatch = useDispatch();   const searchField = [  {  name: "search",  type: "text",  placeholder: "Enter tracking code",  validate: {  minLength: 5,  required: true  },  register: register  }  ];  return (  lt;StyledHerogt;  lt;div className="col-1 hero"gt;  {/* width: 50vw */}  lt;div className=" hero-content"gt;  lt;img className="af-img" src={af} alt="Dispatch Z Nigeria" /gt;  lt;div className="hero-text-container"gt;  lt;h1gt;E-COMMERCE IS NOT COMPLETE WITHOUT DISPATCH Zlt;/h1gt;  lt;pgt;Find our team mate around your vicinity. Receive. Sendlt;/pgt;  lt;/divgt;  lt;form onSubmit={handleSubmit(dispatch(some function))}gt;  lt;div className="form-group"gt;  {searchField.map(props =gt; (  lt;Input key={props.name} {...props} /gt;  ))}  lt;Buttongt;Searchlt;/Buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/StyledHerogt;  ); }; export default Hero;   

ошибка

 Uncaught TypeError: Object(...) is not a function  

ломтик

 import { createSlice } from "@reduxjs/toolkit";  const initialState = {  code: "" };  export const trackCodeSlice = createSlice({  name: "trackCode",  // state  initialState,  reducers: {  setCode: (state, action) =gt; {  state.code = action.payload;  }  } });  export const { setCode } = trackCodeSlice.actions;  export default trackCodeSlice.reducer;   

Магазин

 import { configureStore } from "@reduxjs/toolkit"; import { trackCodeReducer } from "../features";  export const store = configureStore({  reducer: {  trackCode: trackCodeReducer  } });   

Комментарии:

1. Вы говорите «строка ошибки», но затем включаете 2 строки кода. По какой линии идет речь? Можете ли вы предоставить более полный/исчерпывающий пример кода компонента, в котором используются крючки redux и возникают проблемы?

2. Кто-нибудь может мне здесь помочь

3. Ваш вопрос все еще неясен. Какую отладку вы пробовали? Какая строка кода вызывает проблему? useDispatch или useSelector ? Какую версию react-redux вы установили? Из каталога вашего проекта запустите npm list react-redux .