React登录项目Redux-Thunk导入错误求助：代码问题排查

核心错误解决：redux-thunk导入问题 #

你遇到的export 'default' (imported as 'thunk') was not found in 'redux-thunk'错误，是因为redux-thunk v3.x版本采用ES模块规范，不再提供默认导出，只能使用命名导入。

修改src/middleware/store.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;

其他潜在问题修复 #

1. 登录失败状态未更新 #

当前登录失败时仅打印日志，未触发LOGIN_FAILURE action，导致状态无法同步更新。修改src/middleware/actions.js的catch逻辑：

// src/middleware/actions.js
catch (error) {
  console.error('Login error:', error);
  console.log('Gagal login');
  // 新增登录失败的action dispatch
  dispatch({
    type: 'LOGIN_FAILURE',
    payload: error.message || '登录失败'
  });
}

2. Token存储路径可能错误 #

接口返回的token路径response.data.data.token与user的response.data.user结构不一致，需根据实际接口返回调整，例如如果token直接在response.data.token，则修改为：

localStorage.setItem('token', response.data.token);

3. React Router v6变量命名规范 #

useNavigate返回的是导航函数，并非history对象，建议修改变量名避免混淆：

// src/pages/login/index.js
// 替换history为navigate
const navigate = useNavigate();

// 跳转逻辑同步修改
navigate('/admin/dashboard');

4. 添加路由保护（可选） #

当前未对Dashboard页面做登录校验，可新增PrivateRoute组件限制未登录用户访问：

// src/components/PrivateRoute.js
import React from 'react';
import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PrivateRoute = ({ children }) => {
  const { isAuthenticated } = useSelector(state => state.auth);
  return isAuthenticated ? children : <Navigate to="/" />;
};

export default PrivateRoute;

修改Router.js应用路由保护：

// src/Router.js
import PrivateRoute from './components/PrivateRoute';

// ...
<Route path="/admin/dashboard" element={
  <PrivateRoute>
    <DashboardPage />
  </PrivateRoute>
} />
// ...

内容的提问来源于stack exchange，提问作者Ujang Aripin