State is always undefined in nextjs useReducer and useContext

Question

I am using context api in my nextjs project but whenever i am trying to get value from state using context api it is always throwing error "undefined"

AppReducer.js

const initialState = {
    isMobile: false,
    user: {},
};

export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        case "init_stored": {
            return action.value;
        }
        case "setMobile": {
            return {
                ...state,
                isMobile: (typeof window !== "undefined") && window.innerWidth <= 768,
            };
        }
        case "setUser": {
            return {
                ...state,
                user: action.payload,
            };
        }
        default: {
            return state;
        }
    }
};

AppContext.js

import { createContext, useContext, useMemo, useReducer } from "react";
import { AppReducer, initialState } from "./AppReducer";

const AppContext = createContext();

export function AppWrapper({ children }) {
    const { state, dispatch } = useReducer(AppReducer);
    console.log("AppWrapper: state", state);

    const contextValue = useMemo(() => {
        return { state, dispatch };
    }, [state, dispatch]);

    return (
        <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
    );
}

export function useAppContext() {
    return useContext(AppContext);
}

_app.js

import { AppWrapper } from 'context/AppContext'
import Layout from '@/components/layout'

function MyApp({ Component, pageProps }) {
   return (
      <AppWrapper>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AppWrapper>
  )
}

export default MyApp

I am trying to access it inside my homepage like this

 const { state } = useAppContext();
    console.log(state, 'state');

Please help what wrong i am doing or anything i am missing here ?

Use this ```const AppContext = createContext({})``` – Vida Hedayati Mar 09 '22 at 06:15 — Vida Hedayati, Mar 09 '22 at 06:15
Thanks @VidaHedayati but error is still there – Mar 09 '22 at 06:17 — , Mar 09 '22 at 06:17

Vugar Taghiyev · Answer 1 · 2022-03-09T06:25:59.297

1

Finally found). Use [] not {}

const [state, dispatch] = useReducer(AppReducer, { initialState: 'test'});

And call state in Home page

const state = useAppContext()

edited Mar 09 '22 at 06:25

answered Mar 09 '22 at 06:19

Vugar Taghiyev

413
3
9

Thanks @VugarTaghiyev but still same error is there – Mar 09 '22 at 06:23
@HaryanviDeveloper I edited. Send initialState when use useReducer – Vugar Taghiyev Mar 09 '22 at 06:27
@HaryanviDeveloper and your initialState is not exported from appReducer but you are trying to import it – Vugar Taghiyev Mar 09 '22 at 06:29
I am already assigning it to state in AppReducer.js – Mar 09 '22 at 06:31
@HaryanviDeveloper I think Since you don't use dispatch, it doesn't make that assignment at first. – Vugar Taghiyev Mar 09 '22 at 06:35
@HaryanviDeveloper what was it? – Vugar Taghiyev Mar 09 '22 at 06:35
i have used `export const initialState = { isMobile: false, user: null, };` then assigned it to state={initialState} in AppReducer – Mar 09 '22 at 07:02
also i used it `useReducer(AppReducer, { initialState})` – Mar 09 '22 at 07:03
@HaryanviDeveloper great – Vugar Taghiyev Mar 09 '22 at 07:05

score 0 · Answer 2 · answered Mar 09 '22 at 06:20

Please use this way

mport { createContext, useContext, useMemo, useReducer } from "react";
import { AppReducer, initialState } from "./AppReducer";

const AppContext = createContext({});

export function AppWrapper({ children }) {
    const [ state, dispatch ] = useReducer(AppReducer);
    console.log("AppWrapper: state", state);


    return (
        <AppContext.Provider value={{state, dispatch}}>{children}</AppContext.Provider>
    );
}

export function useAppContext() {
    return useContext(AppContext);
}

State is always undefined in nextjs useReducer and useContext

2 Answers2