Импортировать thunk из redux-thunk не работает в stackblitz

Сейчас я пробую базовую логику сокращения на платформе Stackblitz.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import taskReducer from './reducers/taskReducer';

const store = createStore(
  taskReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

Но когда я добавляю этот код в src/store.js, на панели предварительного просмотра отображается пустая страница. И просто когда измените этот файл, чтобы не использовать createStore или thunk, это работает нормально. Я почти уверен, что этот код правильный, и думаю, что это просто проблема stackblitz.

Поэтому я хочу знать, почему это происходит

Спасибо за помощь, сообщество..

Сейчас я просто пробую и надеюсь, что stackblitz сработает нормально.

Есть ли ошибка? Если вы используете версию 3, попробуйте import { thunk } from 'redux-thunk'

— 29.03.2024 12:30

О, спасибо за помощь.. Все работает нормально 👍. Так стоит ли мне использовать { thunk } вместо thunk?

— 29.03.2024 13:28

reactjs redux redux-thunk stackblitz

29.03.2024 11:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

374

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В readux-thunk@3 больше нет default экспорта, поэтому с import thunk from "redux-thunk"thunk не определено.

Сравните v2

...

const thunk = createThunkMiddleware() as ThunkMiddleware & {
  withExtraArgument<
    ExtraThunkArg,
    State = any,
    BasicAction extends Action = AnyAction
  >(
    extraArgument: ExtraThunkArg
  ): ThunkMiddleware<State, BasicAction, ExtraThunkArg>
}

// Attach the factory function so users can create a customized version
// with whatever "extra arg" they want to inject into their thunks
thunk.withExtraArgument = createThunkMiddleware

export default thunk

до v3

...

function createThunkMiddleware<
  State = any,
  BasicAction extends Action = AnyAction,
  ExtraThunkArg = undefined
>(extraArgument?: ExtraThunkArg) {
  // Standard Redux middleware definition pattern:
  // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware
  const middleware: ThunkMiddleware<State, BasicAction, ExtraThunkArg> =
    ({ dispatch, getState }) =>
    next =>
    action => {
      // The thunk middleware looks for any functions that were passed to `store.dispatch`.
      // If this "action" is really a function, call it and return the result.
      if (typeof action === 'function') {
        // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
        return action(dispatch, getState, extraArgument)
      }

      // Otherwise, pass the action down the middleware chain as usual
      return next(action)
    }
  return middleware
}

export const thunk = createThunkMiddleware()

...

Обновите свой код, чтобы импортировать именованный экспорт thunk.

import { createStore, applyMiddleware } from 'redux';
import { thunk } from 'redux-thunk'; // <-- import named export
import { composeWithDevTools } from 'redux-devtools-extension';

import taskReducer from './reducers/taskReducer';

const store = createStore(
  taskReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

29.03.2024 16:10

Установите расширение Redux DevTools в свой браузер, каким бы оно ни было. А затем запустите приложение, в моем случае оно сработало.

20.04.2024 14:31