How counterReducer is generated in Redux tutorial sample - redux

Question

I am reading the Redux official tutorial. I surprised when I see the counterReducer which there is not in any modules bu has value and works! I couldn't find any description of it but :
Since we know that the counterReducer function is coming from
features/counter/counterSlice.js, let's see what's in that file, piece
by piece.
I even change the name of the slicer to the counter3 but it still works!
Can anyone describe to me please how it is generated?
counterSlice.js
import { createSlice } from '#reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter3',
initialState: {
value: 0,
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const incrementAsync = amount => dispatch => {
setTimeout(() => {
dispatch(incrementByAmount(amount));
}, 1000);
};
export const selectCount = state => state.counter.value;
export default counterSlice.reducer;
store.js (We use it in store.js module)
import { configureStore } from '#reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice'; //HERE IS THE IMPORTING PLACE
export default configureStore({
reducer: {
counter: counterReducer,
},
});
https://redux.js.org/tutorials/essentials/part-2-app-structure#creating-slice-reducers-and-actions

Answer 1

The counterSlice.js is using an ES6 "default export" to export the reducer function generated by createSlice:
export default counterSlice.reducer;
Any other file can then use a "default import" to get a reference to that reducer function. However, when we default import a value, we can give it any name we want:
// fileA.js
import counterReducer from "./features/counter/counterSlice"
// fileB.js
import someReducer from "./features/counter/counterSlice"
// fileC.js
import fred from "./features/counter/counterSlice"
All three of those variables will point to the same reducer function - it's just a question of what the local variable name is that we've created.
So, in this case, the counterReducer variable in store.js is a reference to the reducer function that was exported from the counterSlice.js file.