klarna / electron-redux

Use redux in the main and browser processes in electron

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Actions are processed in renderer and main store with triggerAlias Middleware

xXanth0s opened this issue · comments

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;

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.

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.