我收到错误：在“redux-thunk”中找不到导出“default”（导入为“thunk”）（可能的导出：thunk、withExtraArgument）

Question

我用 "react-redux": "^9.0.4", "react-router-dom": "^6.21.1", “反应脚本”：“5.0.1”， "redux": "^5.0.0", “redux-thunk”：“^3.1.0” 我想使用 React-Redux 在 React.js 中使用中间件创建登录，这是我的代码。

// src/middleware/store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const guard = createStore(rootReducer, applyMiddleware(thunk));

export default guard;

// src/middleware/actions.js
import axios from 'axios';

export const login = (username, password, history) => async (dispatch) => {
  try {
    const response = await axios.post('https://xxx-api.xxx-xxxxxxx.com/users/login', {
      username,
      password,
    });

    dispatch({
      type: 'LOGIN_SUCCESS',
      payload: {
        user: response.data.user,
      },
    });

    localStorage.setItem('token', response.data.data.token);
    
    history.push('/admin/dashboard');
  } catch (error) {
    console.error('Login error:', error);
    console.log('Gagal login');
  }
};

export const logout = () => (dispatch) => {
  localStorage.removeItem('token');

  dispatch({
    type: 'LOGOUT',
  });
};

// src/middleware/reducers.js
import { combineReducers } from 'redux';

const initialState = {
  user: null,
  isAuthenticated: false,
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload.user,
        isAuthenticated: true,
      };
    case 'LOGIN_FAILURE':
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        isAuthenticated: false,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  auth: authReducer,
  // ...tambahkan reducer lain jika ada
});

export default rootReducer;

// src/Router.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider } from 'react-redux';
import guard from './middleware/store';

import LoginPage from './pages/login';
import DashboardPage from './pages/dashboard';
import Page404 from './pages/404';

const AppRouter = () => {
  return (
    <Provider store={guard}>
      <Router>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/admin/dashboard" element={<DashboardPage />} />
          <Route path="*" element={<Page404 />} />
        </Routes>
      </Router>
    </Provider>
  );
};

export default AppRouter;

// src/pages/login/index.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { login } from './../../middleware/actions';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();
  const history = useNavigate();

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(login(username, password, history));
  };

  return (
    <div>
      <h2>Login Form</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label htmlFor="username" className="form-label">Username:</label>
          <input
            type="text"
            className="form-control"
            id="username"
            value={username}
            onChange={handleUsernameChange}
            required
          />
        </div>
        <div className="mb-3">
          <label htmlFor="password" className="form-label">Password:</label>
          <input
            type="password"
            className="form-control"
            id="password"
            value={password}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <button className='btn btn-success' type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginPage;

这是我的代码中的错误

你们能帮我解决我的项目中的错误吗？我的代码有什么问题吗？

Answer 1

import {thunk} from 'redux-thunk';

只需更改“// src/middleware/store.js”中的这一行，它应该可以完美运行。