#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
.