klarna / electron-redux

Use redux in the main and browser processes in electron
MIT License
743 stars 94 forks source link

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

Open xXanth0s opened 3 years ago

xXanth0s commented 3 years ago

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;
matmalkowski commented 3 years ago

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 commented 3 years ago

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.