javascript - Why my Redux reducer is undefined when I import it

Question

Good evening, I have a small problem. I code an application with React and Redux + Redux Toolkit and simply at the time of importing my reducer in the root reducer, therefore the rootReducer, I realize that my reducer therefore unReducer was not imported correctly, here is the problem.

I put the scope of my rootReducer.js in attachment with a focus on the module in question so FormConnexionReducer which is equivalent to unReducer in my code.

Thank you in advance for your answers.

unReducer.js

//importation des dépendances

const unReducer = createSlice({
  name: 'unReducer',
  initialState: {
    a: '',
    b: '',
  },

  reducers: {
    print_a: () => console.log(a),
    print_b: () => console.log(b)
  },
});

const {print_a, print_b} = unReducer.actions;

export const print_aAction = () =>
  ApplicationStore.dispatch(print_a());

export const print_bAction = () =>
  ApplicationStore.dispatch(print_b());

export default unReducer.reducer;

rootReducer.js

import {combineReducers} from 'redux';
import {default as unReducer} from 'unReducer.js';

export default combineReducers({ // breakpoint, the picture of the scope is at the end of the post
  unReducer,
});

breakpoint scope CLICK ON THE LINK TO SEE THE PICTURE

Answer 1

Your slice file seems to be referencing a store. If the slice references the store file and the store file references the slice file, you have a circular dependency.

JavaScript needs to execute one of the two files first - the imports from the other file will be undefined at that point in time and only filled in later.

Identify your circle and move some stuff out into a third file to break it.