Using with Redux Toolkit

[princesust]

When I try to use redux toolkit, alias is dispatched and corresponding function is also called but after that showing an error
wrapStore.js:97 Error: Actions must be plain objects. Use custom middleware for async actions.

Below are full code
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { wrapStore, alias } from "webext-redux";
import logger from "redux-logger";
import rootReducer from "./Reducers";

const aliases = {
"user-clicked-alias": () => {
console.log("user-clicked-alias");
},
};

const store = configureStore({
reducer: rootReducer,
middleware: [...getDefaultMiddleware(), logger, alias(aliases)],
});
wrapStore(store);

[pabloat81]

Same error using aliases, any fix?

[walleXD]

@princesust @pabloat81 aliases need to go first as they are intercepting and remapping fired actions to aliased ones. Then they remapped actions pass through middleware / reducer. If you put alias at the end, the remapped actions don't do anything cuz you are at the end of the middleware stack and then they jus go through the reducers

[pabloat81]

Hi @walleXD, thanx for the response.

I only have the code similar to the example of readme.md and get that error (any idea what i am doing wrong?):

import {applyMiddleware ,createStore} from 'redux';
import rootReducer from './reducers';
import {alias, wrapStore} from 'webext-redux';

const aliases = {
// this key is the name of the action to proxy, the value is the action
// creator that gets executed when the proxied action is received in the
// background
'contact-selected-alias': () => {
// this call can only be made in the background script
chrome.browserAction.setBadgeText({text: "+"});
chrome.browserAction.setBadgeBackgroundColor({color: 'red'});
}
};

const store = createStore(rootReducer, applyMiddleware(
alias(aliases)
));

wrapStore(store);

[pabloat81]

@walleXD

Something i forgot to mention is that the alias gets executed aside the warning or error message.

Regards.

[charlie632]

Getting the same error using RTK. The alias is executing correctly, so no problem there, only the error

[charlie632]

Found a solution... In the alias you need to return the action

const aliases = {
  ['accounts/queryAccounts']: (action: PayloadAction<QueryPayload>) => {
    // do stuff
    return action; // Return this
  },
};

[GeekaholicLin]

Is there an example using webext-redux with RTK?
When I import store into background.js and using wrapStore(store) as below, it throws an error Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

import { initStore } from '@/store';
import { wrapStore } from 'webext-redux';

const store = initStore(); // this will use `configureStore` and `createSlice` to init
wrapStore(store);

[tknickman]

I use webext-redux with RTK. It's an internal extension, so I can't publish the full source code unfortunately. But here's my store code if it's helpful for you!

import {
  configureStore,
  getDefaultMiddleware,
  combineReducers,
  Action,
} from '@reduxjs/toolkit';
import { alias, wrapStore } from 'webext-redux';
import { ThunkAction, ThunkMiddleware } from 'redux-thunk';
import logger from 'redux-logger';
import reducerMap from './slices';
import aliasMap from './aliases';

const rootReducer = combineReducers(reducerMap);
export type BackgroundState = ReturnType<typeof rootReducer>;

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    alias(aliasMap),
    ...getDefaultMiddleware<BackgroundState>(),
    process.env.NODE_ENV !== 'production' && logger,
  ].filter(Boolean) as ThunkMiddleware<BackgroundState>[],
});

const { dispatch } = store;
wrapStore(store);

export type BackgroundDispatch = typeof store.dispatch;
export type BackgroundThunk = ThunkAction<
  void,
  BackgroundState,
  unknown,
  Action<string>
>;

export { store };
export default dispatch;

[buryo]

@tknickman Is there a way to use Redux DevTools for debugging state in background.js?

[tknickman]

@buryo not to my knowledge, but using things like redux-logger are pretty helpful for seeing state changes in the background scripts.