Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Actions are processed in renderer and main store with triggerAlias Middleware #283

Open
xXanth0s opened this issue Nov 11, 2020 · 2 comments
Labels

Comments

@xXanth0s
Copy link

In my redux store I recognized, that all actions which are dispatcher, are processed by the main and the renderer store.
As far as my store is pretty huge and the data which is processed by some actions needs a bit more calculation power, it is necessary that only the main store is processing these actions.
In the documation it is written, that the middleware triggerAlias should fix this problem, but actions are still processed in all stores.
Also creating an alias action and dispatching that is not fixing the problem

I am using redux-toolkit to create the store. Is there any common issue known with that framework?

Here is my code to create stores

const mainStore = configureStore<StateModel>({
    reducer: {
        field1: field1Slice.reducer,
        field2: field2Slice.reducer,
    },
    // @ts-ignore
    middleware: [
        triggerAlias,
        sagaMiddleware,
        forwardToRenderer
    ],
    devTools: environment.isDev,
    preloadedState
});

sagaMiddleware.run(watcherSaga);

replayActionMain(backgroundStore);

export default mainStore;
const rendererStore = configureStore<StateModel>({
    reducer: {
        field1: field1Slice.reducer,
        field2: field2Slice.reducer,
    },
    preloadedState: initialState,
    // @ts-ignore
    middleware: [
        forwardToMainWithParams(),
    ],
    devTools: environment.isDev,
});

replayActionRenderer(rendererStore);

export default rendererStore;

Example for reducer

const updateField1 = function (data: StateModel['field1']): StateModel['field1'] {
   
    return data;
};

export const field1Slice = createSlice({
    name: 'field1',
    initialState: {},
    reducers: {
        updateField1Action: (state: StateModel['field1'], action: PayloadAction<StateModel['field1']>) => updateField1(action.payload)
    }
});

export const {updateField1Action} = field1Slice.actions;
@xXanth0s xXanth0s changed the title Actions are processed in renderer and main store with triggerAlias Middl Actions are processed in renderer and main store with triggerAlias Middleware Nov 11, 2020
@matmalkowski
Copy link
Collaborator

I'm not aware of any issues with redux-toolkit, but on the other hand, we also did not test it with it, so maybe it's the source of problem. In vanilla redux, we cannot see this issue.

@jameslh
Copy link

jameslh commented Dec 23, 2020

I don't think this is necessarily a bug. I believe the issue is that createSlice automatically creates an action for you based on the passed in reducer keys. However, to use triggerAlias middleware, you should be calling createAliasedAction.

So instead of exporting the action created from createSlice, you would need to export an action created from createAliasedAction. It lessens the helpfulness of react toolkit, but it worked in my testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants