Блог

Я использую библиотеку Notistack и разветвляю ее, а затем использую VSCode, чтобы попытаться добавить хранилище Redux в библиотеку, которую я хочу предоставить приложениям.

Я не очень хорошо разбираюсь в машинописи. У меня кое-какие проблемы, хе-хе.

Что я хочу сделать, так это когда приложение использует Notistack для отображения сообщения о закуске. Я хочу использовать Redux для обновления сообщения в режиме реального времени, например, для отображения прогресса загрузки/загрузки файла на ленте. Именно здесь в игру вступает не новый магазин Redux(который я создаю здесь). Я хочу, чтобы Notistack предоставил приложению доступ к магазину Redux, чтобы приложение могло отправлять redux dispatch в магазин Notistack Redux. и показывает dispatched сообщение в Notistack SnackbarItem.tsx
(надеюсь, вы понимаете)

Когда я компилирую в VSCode, я получаю эту ошибку в своем приложении:

 Failed to compile.

./src/redux/root-reducer.js
Attempted import error: 'notistack' does not contain a default export (imported as 'NotisReducer'). 
 

Мой корневой редуктор в приложении выглядит так:

 import { combineReducers } from 'redux';
import NotisReducer from 'notistack';
import snackReducer from './snackbar/snack.reducer';

const rootReducer = combineReducers({
    snack: snackReducer,
    NotisReducer,
});
export default rootReducer;
 

Как вы видите, я импортирую Notistack NotisReducer , и я думаю, что реализовал это.

(Я использовал ссылку NPM, чтобы добавить локально разветвленную библиотеку Notistack в свое приложение)

Теперь это выглядит так, как будто это не Стэк indext.js файл, в котором я предоставляю хранилище Redux как NotisReducer :

Что я сделал в Notistack, так это добавил a в index.d.ts:

Я определяю store тип следующим образом:

 import * as React from 'react';
import { SnackbarClassKey } from '@material-ui/core/Snackbar';
import { ClickAwayListenerProps } from '@material-ui/core/ClickAwayListener';
import { TransitionProps } from '@material-ui/core/transitions/transition';
import { StandardProps } from '@material-ui/core';
import store from './Redux/store'; // MY STORE
...
...
export type store = store; // EXPORT IT
 

Я не уверен, правильно ли это, так как я не смог установить точку останова в npm linked Notistack. Может быть, сейчас это для многих проблема, которую нужно решить в первую очередь.

In the file
SnackbarProvider.tsx
I did like this, importing the store type from index.d.ts):

 import {
  SnackbarProviderProps,
  SnackbarKey,
  SnackbarMessage,
  OptionsObject,
  RequiredBy,
  ProviderContext,
  TransitionHandlerProps,
  store, //  STORE
} from ".";
import createChainedFunction from "./utils/createChainedFunction";

export { store }; // EXPOSING IT 
 

In the file
NotisReducer.js
I import the store to be sent to indext.js above

But as you saw above I get compiler error store is not exported.

 Attempted import error: 'notistack' does not contain a default ex (imported as 'NotisReducer'). 
 

please advice :))