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?
I'm not sure where the "handler.js" file fits into your app.
However: