Home React Hook "useAppDispatch". React Hook names must start with the word "use"

Questions

React Hook "useAppDispatch". React Hook names must start with the word "use"

September 29, 2022

counter1Slice.ts

import { createSlice } from "@reduxjs/toolkit";
import { Counter1State } from "../../model/counter.model";
import { RootState } from "../store";


export const initialValues:Counter1State={
    counter:0,
    loading:false
  }

const counter1Slice = createSlice({
    name:'counter1',
    initialState:{initialValues},
    reducers:{},
    extraReducers:(builder)=>{

    }
})

export const {} = counter1Slice.actions
export const counter1Selector = (store:RootState)=>store.counter1Reducer //this <- store.ts
export default counter1Slice.reducer

store.ts


const reducer = {
  counter1Reducer,
  counter2Reducer,
};

export const store = configureStore({
  reducer,
  devTools: process.env.NODE_ENV === "development",
});

// export type of root state from reducers
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

page1.tsx

import { useSelector } from 'react-redux';
import { counter1Selector } from '../store/slices/counter1Slice';
import { useAppDispatch } from "../store/store";

export default function page1({}: Props) {
  const dispatch = useAppDispatch();                       // red line error useAppDispatch
  const counter1Reducer = useSelector(counter1Selector);   //red line error useSelector

    return (
        <div>
          <h4>Page1</h4>
          <button
            onClick={() => {}}
          >
            counter1 - {''}
          </button>
    
          <button
            onClick={() => {}}
          >
            Async counter1 - {''}
          </button>
        </div>
      );
}

React Hook "useAppDispatch" is called in function "page1" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks