React Redux Toolkit: No reducer provided for key "myReducer" when importing store to separate files

3.6k views Asked by At

I'm trying to dispatch a redux action on some event outside react component. But when I do import store from '../../app/store' in my separate js file containing this event handler, I'm getting the following error inside a component:

No reducer provided for key "myReducer"

my files:

store.js:

import { configureStore } from '@reduxjs/toolkit';
// ...
import rootReducer from './rootReducer'

const middleware = //...

const store = configureStore({
  reducer: rootReducer,
  middleware
});

export default store;

rootReducer:

import { combineReducers } from 'redux';

// reducers created with createSlice and exported like this: export default SomeFeatureSlice.reducer;
import myReducer from '../features/my/mySlice' 
import SomeFeatureReducer from '../features/some_feature/SomeFeatureSlice'


const rootReducer = combineReducers({
    //...
    myReducer,
    SomeFeatureReducer
});

export default rootReducer;

component:

// ...
const mapStateToProps = state => ({
    some_prop: state.myReducer.some_prop
})
// ...

handler:

// ...
import store from '../../app/store'
// an action exported this way: export const { myAction } = SomeFeatureSlice.actions;
import { myAction } from '../../features/some_feature/SomeFeatureSlice'
//...
store.dispatch(myAction());
//...

index.js:

import store from './app/store';
// ...

ReactDOM.render(
  <React.Fragment> 
    <Provider store={store}>
      <App />
    </Provider>
  </React.Fragment>,
  document.getElementById('root')
);

When I remove import store statement from handler everything works fine. What I'm doing wrong?

1

There are 1 answers

3
markerikson On BEST ANSWER

I'm not sure where the "handler.js" file fits into your app.

However: