React和Redux / export 'default'未在'react-redux'中找到,但已导出

bwntbbo3  于 2023-03-30  发布在  React
关注(0)|答案(2)|浏览(516)

我有一些麻烦,在浏览器上执行我的Visual Studio代码项目的时间。
错误。
export 'default' (imported as 'Redux') was not found in 'react-redux' (possible exports: Provider, ReactReduxContext, batch, connect, createDispatchHook, createSelectorHook, createStoreHook, shallowEqual, useDispatch, useSelector, useStore)
我的代码是这样的。
src/index.js

import ReactDOM from "react-dom/client";
import Redux from "react-redux";
import Store from "./store/index";
import App from "./App";
import "./index.css";

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

src/store/index.js

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 = Redux.createStore(counterReducer);

export default store;

src/components/counter.js

import style from "./Counter.module.css";

const Counter = () => {
  const distpach = Redux.useDispatch();
  const counter = Redux.useSelector((state) => state.counter);
  const visibility = Redux.useSelector((state) => state.visibility);

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

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

  const toggleCounterHandler = () => {
    distpach({ 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;

Image with error
导出看起来是正确的,我不知道发生了什么。我想我在文件src/store/index.js中调用函数Redux.createStore的方式已经过时了,但这就是我错误的原因?
有人知道解决这个问题的方法吗?

sqxo8psd

sqxo8psd1#

不要把Redux from 'react-redux'的导入弄得很复杂,实际上react-redux不导出默认值,所以你不能直接导入。
另一方面react-redux导出ProvideruseDispatchuseSelector等..所以你应该像这样导入

import {Provider, useDispatch, useSelector, connect} from 'react-redux'

直接使用这些

<Provider store={Store}>
      <App>
   </Provider>

你可以理解你的例子代码在这你export default store注意,存储与小s .和你使用存储与资本S
这里如果你删除了default关键字,那么你需要导入存储为

import { store } from './store/index';
j2qf4p5b

j2qf4p5b2#

NAZIR HUSSAIN怎么说,我在如何申报进口和如何申报出口方面有一些问题。
下一个,为我工作!
src/index.js

import React from "react";
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>
);

和我的文件... src/store/index.js

import {createStore} from "redux";

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 = createStore(counterReducer);

export { store };

非常感谢!

相关问题