problem in fetching data from a file by using useReducer in reactjs

Question

I am new to reactjs and playing with useState and useReducer. I have data in a file and from that file I want to get data. I can do it with useState but when I want to do it by using useReducer I get an error. Another interesting thing is that, if I insert that same data in useReducer's initial state it works and displays the data. Below is the code and data file.

dataOnFile.js (file from which I want to fetch data)

const dataOnFile = [
{
    id: 1,
    name: "ahmad",
    status: true,
},
{
    id: 2,
    name: "john",
    status: true,
},
{
    id: 3,
    name: "sara",
    status: true,
},
];
export default dataOnFile;

globalContext.js (using context to use it in other compnents, in this I am using useState and by using useState it works fine, it accepts the Items as an initial state)

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

export function GlobalProvider(props) {
const [items, setItems] = useState(Items);
return (
    <div>
        <GlobalContext.Provider value={[items, setItems]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

GlobalContext.js (by using useReducer, I get an error, it's not accepting Items as an initial state) ReferenceError: Cannot access 'Items' before initialization

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

function itemsReducer(Items, action) {
return <div></div>;
}

export function GlobalProvider(props) {
const [Items, itemsDispatch] = useReducer(itemsReducer, Items);

return (
    <div>
        <GlobalContext.Provider value={[Items, itemsDispatch]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

globalContext.js (if I put data on useReducer's initial state it works)

import React, { createContext, useReducer, useState } from "react";
import Items from "./dataOnFile";

export const GlobalContext = createContext();

function itemsReducer(Items, action) {
return <div></div>;
}

export function GlobalProvider(props) {
const [Items, itemsDispatch] = useReducer(itemsReducer, [
    {
        id: 1,
        name: "ahmad",
        status: true,
    },
    {
        id: 2,
        name: "sheeraz",
        status: true,
    },
]);

return (
    <div>
        <GlobalContext.Provider value={[Items, itemsDispatch]}>
            {props.children}
        </GlobalContext.Provider>
    </div>
);
}

Answer 1

I think the problem here is that you're putting Items as the state for the reducer, the initial state and the parameter in the reducer. Note that useReducer calls the hook, thats where you want to pass your initial state.

Try this in the component:

const [items, itemsDispatch] = useReducer(itemsReducer, Items);

(Note that there is no capital 'I' in that state name)

And this in the reducer:

const itemsReducer = (state, action) => {
// Do stuff
}