React-Redux报错：未找到default导出，求修复方案

核心错误原因 #

• react-redux 没有默认导出，你用 import Redux from "react-redux" 的默认导入方式是错误的，必须用命名导入
• Redux.createStore 确实已被官方弃用，现在推荐使用 Redux Toolkit 提供的 configureStore 创建 store

步骤1：安装Redux Toolkit（未安装则执行） #

在项目根目录运行命令：

npm install @reduxjs/toolkit react-redux

步骤2：修改src/index.js #

替换默认导入为命名导入Provider：

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store/index";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

步骤3：修改src/store/index.js #

改用configureStore创建store：

import { configureStore } from "@reduxjs/toolkit";

const initialState = { counter: 0, visible: true };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return {
        counter: state.counter + 1,
        visible: state.visible,
      };
    case "decrement":
      return {
        counter: state.counter - 1,
        visible: state.visible,
      };
    case "switchVisibility":
      return {
        counter: state.counter,
        visible: !state.visible,
      };
    default:
      return state;
  }
};

const store = configureStore({ reducer: counterReducer });

export default store;

步骤4：修改src/components/counter.js #

• 改用命名导入useDispatch和useSelector
• 修正拼写错误：distpach → dispatch
• 修正state字段取值：state.visibility → state.visible（对应initialState定义的字段）

import style from "./Counter.module.css";
import { useDispatch, useSelector } from "react-redux";

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  const visibility = useSelector((state) => state.visible);

  const incrementHandler = () => {
    dispatch({ type: "increment" });
  };

  const decrementHandler = () => {
    dispatch({ type: "decrement" });
  };

  const toggleCounterHandler = () => {
    dispatch({ type: "switchVisibility" });
  };

  return (
    <main className={style["counter"]}>
      <h1>Redux Counter</h1>
      {visibility && <div className={style["value"]}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

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