Отправка действия Redux внутри фоновой страницы расширения Chrome с помощью TypeScript - PullRequest
1 голос
/ 27 июня 2019

Я работаю над фоновой страницей в расширении Chrome, которое асинхронно отправляет действие Redux с Thunk.Создатель действия определен следующим образом:

export const executeProcess = (data: Data[]): ThunkAction<Promise<void>, {}, {}, AnyAction> => async (dispatch: ThunkDispatch<{}, {}, AnyAction>): Promise<void> => {

Я могу передать это прекрасно с экрана, используя диспетчеризацию карты компонента для реквизита, то есть:

const mapDispatchToProps = {
    executeProcess: executeProcess,
};

И:

eventTest = async () => {

        //
        //  Kickoff process
        await this.props.executeProcess(this.props.data);
    };

И сам JSX:

<button onClick={this.eventTest}>EVENT TESTER</button>

Я пытаюсь сделать что-то похожее на фоновой странице, в частности:

chrome.alarms.onAlarm.addListener(async () => {
await store.dispatch(executeProcess(store.getState().data))
});

Иэто вызывает следующую ошибку TS:

Property 'type' is missing in type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' but required in type 'AnyAction'.

Я использую пакет webext-redux NPM, чтобы я мог работать с хранилищем как на экранах, так и на фоновых страницах и мог читатьиз магазина на фоновой странице, однако не может отправлять действия.Для определения отправки требуется экземпляр типа AnyAction, а именно:

export interface AnyAction extends Action

Однако ThunkAction естественным образом расширяется от действия:

export type ThunkAction<R, S, E, A extends Action> = (

Есть ли способ изменить подписьсоздатель действий, чтобы отправка работала без проблем как на экранах, так и на фоновой странице?

Как я объявляю свои store.ts с помощью (вышеупомянутого NPM):

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
let store: Store<RootState>;

store = createStoreWithMiddleware(reducers, loadState());
store.subscribe(throttle(() => {
    saveState(store.getState())
}, 1000));

wrapStore(store, {
    portName: constants.ApplicationName,
});

export {store};

1 Ответ

0 голосов
/ 27 июня 2019

Решение / кладж, чтобы сделать эту работу, определите хранилище следующим образом:

let store: Store<RootState, any>;

, которое разрешается следующим образом:

export interface Store<S = any, A extends Action = AnyAction> {

вместо этого:

let store: Store<RootState>;

В идеальном случае вместо любого типа должна передаваться ThunkAction, но возникает проблема с общим аргументом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...