web-dev-qa-db-ja.com

アプリケーションの実行時に「react-redux」のuseSelectorが定義されていません

_'react-redux'_のuseSelector関数は、バージョンが最新であり、VSコードにエラーがない場合でも、反応アプリケーションではundefinedです（Ctrlキーを押しながらクリックすることもできます）で入力を確認し、_node_modules_フォルダーのコード）を確認します。これはいくつかの方法で現れます：

1）次のエラー_[HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'_。

2）次のコンポーネント：

_import React, { useState } from 'react';
import { useSelector } from 'react-redux';  // importing useSelector does not error in VS Code

const TestComponent = () => {
    const [x, setX] = useState("hello");  // useState works correctly
    console.log(useSelector);  // but useSelector is undefined when the application runs
    return <p> {x} </p>
}

export default TestComponent;
_

このエラーがホットリロード、webpack、または何か他のものに関係しているのかどうかはわかりません。

パッケージバージョン：

_// react
"@types/react": "^16.9.9",
"react": "^16.10.2",

// redux
"@types/react-redux": "^7.1.5"
"react-redux": "^7.1.3",
"redux": "^4.0.5", 
_

私が試みたこと：

1）すべてのreduxパッケージを最新バージョンに更新しました

2）_node_modules_を削除して再インストール

3）ホットリロードパッケージを最新バージョンに更新

4）_react-redux_内の_node_modules_のコードを見ると、useSelectorフックはありますが、次のようにすると：_import * as ReactRedux from 'react-redux';_そしてconsole.log(ReactRedux)、次のように表示され、どのフックもインポートされていないことを示しています。

enter image description here

reactjstypescriptreduxreact-redux
3
sutherlandahoy

したがって、コードスニペットでは、使用されているストアが見つかりませんでした。

値を増減させ、サインインとサインアウトを行うサンプル作業アプリケーションを追加しました

以下のスニペットを確認してください

App.js

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useSelector, useDispatch, Provider } from "react-redux";
import allActions from "./actions";
import { createStore } from "redux";
import rootReducer from "./reducers";

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const App = () => {
  const counter = useSelector(state => state.counter);
  const currentUser = useSelector(state => state.currentUser);

  const dispatch = useDispatch();

  const user = { name: "Rei" };

  useEffect(() => {
    dispatch(allActions.userActions.setUser(user));
  }, []);

  return (
    <div className="App">
      {currentUser.loggedIn ? (
        <>
          <h1>Hello, {currentUser.user.name}</h1>
          <button onClick={() => dispatch(allActions.userActions.logOut())}>
            Logout
          </button>
        </>
      ) : (
        <>
          <h1>Login</h1>
          <button
            onClick={() => dispatch(allActions.userActions.setUser(user))}
          >
            Login as Rei
          </button>
        </>
      )}
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(allActions.counterActions.increment())}>
        Increase Counter
      </button>
      <button onClick={() => dispatch(allActions.counterActions.decrement())}>
        Decrease Counter
      </button>
    </div>
  );
};

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

動作 codesandbox

1
DILEEP THOMAS