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

CodePudding user response：

The name of your component page1 should start with a capital letter (because it's a component). Rename it to Page1 and it should work.