state undefined in file tree reducer

Question

I want to just return an array of objects from my reducer, but useSelect() returns undefined

reducer/directories/index.js:

export * from './reportDir'

reducer/directories/reportDir.js:

const reportDir = [
{
    type: 'cat',
    name: 'گزارش ها',
    childrens: [
        {
            type: 'folder',
            name: 'گزارش های اپراتور',
            childrens: [
                {type: 'file', name: 'گزارش شنود', route: '/listen', id: 1}
            ]
        },
        {
            type: 'folder',
            name: 'گزارش مالی',
            childrens: [
                {type: 'file', name: 'مالی', id: 2}
            ]
        }
    ]
}
 ]

 const reportDirReducer = (state = reportDir) => {
  return state
 }

 export default reportDirReducer

reducer/index.js:

import { combineReducers } from 'redux'
import newTabReducer from './newTabReducer' 
import fileReducer from './fileReducer'
import tableReducer from './tableReducer'
import { authentication } from './authenticationReducer';
import { alert } from './alertReducer';
import { listen } from './reportOpReducer';
import { reportDirReducer } from './directories';

export default combineReducers({
 newTabReducer, fileReducer, authentication, 
    tableReducer, alert, listen, reportDirReducer
})

this is a simple directory path I have created for my react app and I don't know why am I getting undefined from reportDirReducer?

score 0 · Accepted Answer · answered Apr 11 '21 at 06:02

Your reducer/index.js file is looking for a named export with the name reportDirReducer in './directories'. This variable doesn't exist because the reducer is a default export, not a named export. It essentially gets "lost" when using export *.

In your reducer/directories/index.js, use this instead:

export { default as reportDirReducer } from './reportDir';

We import the default export from './reportDir' which is the reducer. Then we re-export it as a named export reportDirReducer.

Another solution would be to keep the reducer/directories/index.js file the same as it is now and change reducer/directories/reportDir.js to use a named export instead of default export.

export const reportDirReducer = (state = reportDir) => {
  return state;
};

state undefined in file tree reducer

1 Answers1