添加 react-redux Provider 时钩子调用无效答案

【问题标题】：Invalid hook call when adding react-redux Provider添加 react-redux Provider 时钩子调用无效
【发布时间】：2020-09-10 22:04:09
【问题描述】：

我正在构建一个小应用程序来学习如何使用 Redux Toolkit（我对 React/Redux 的了解主要来自已过时的 Udacity 课程）。

错误消息给出了弹出此错误的前 3 个原因，但似乎其中任何一个都不适用于我。

React 和 React DOM 的版本不匹配？我的两个都被列为依赖项并且具有相同的版本。
违反 Hooks 规则？不使用我知道的任何钩子。我所有的组件都是类组件（Udacity，还记得吗？）。此外，我已经从 App 组件的 render() 调用中删除了所有组件，但错误仍然存在。
不止一份 React？ npm ls react 只显示一个版本。

我不太确定从这里去哪里。每当我从 ReactDOM.render() 调用中删除 Provider 时，错误就会消失。

我已经盯着这个有一段时间了，但我没有得到任何结果。发布我认为是下面的相关代码。

我目前有一个减速器：

/src/features/mortgage/mortgageSlice.ts

import { createSlice } from '@reduxjs/toolkit'

interface MortgageState {
  principal?: number
  rate?: number
  term?: number
  closingCosts?: number
  amortization?: { payment: number; schedule: Array<any> }
}

const payment = (rate: number, nper: number, pv: number) => {
  const pvif = Math.pow(1 + rate / 100, nper)
  return (rate / (pvif - 1)) * -(pv * pvif)
}

const computeSchedule = (
  principal: number,
  apr: number,
  nper: number,
  payment: number
) => {
  let schedule = []
  let remaining = principal
  for (let i = 0; i <= nper; i++) {
    // apr percent / 100 (to decimal) / 12 (months in a year)
    const interest = remaining * (apr / 100 / 12)
    const principal = payment - interest
    const row = [
      i,
      principal > 0 ? principal : 0,
      interest > 0 ? interest : 0,
      remaining > 0 ? remaining : 0,
    ]
    schedule.push(row)
    remaining -= principal
  }
  return schedule
}

const initialState: MortgageState = {}

const mortgageSlice = createSlice({
  name: 'mortgage',
  initialState,
  reducers: {
    updateMortgageParams(state, action) {
      const { principal, rate, term, closingCosts } = action.payload
      state.principal = principal
      state.rate = rate
      state.term = term
      state.closingCosts = closingCosts
    },
    amortize(state, action) {
      const { principal, rate, term } = state
      if (principal && rate && term) {
        const pmt = payment(rate, term * 12, principal)
        const schedule = computeSchedule(principal, rate, term * 12, pmt)
        state.amortization = { payment: pmt, schedule }
      }
    },
  },
})

export const { updateMortgageParams, amortize } = mortgageSlice.actions

export default mortgageSlice.reducer

根减速器：

/src/app/rootReducer.ts

import { combineReducers } from '@reduxjs/toolkit'
import mortgage from '../features/mortgage/mortgageSlice'

export default combineReducers({
    mortgage
})

商店：

/src/app/store.ts

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer
})

export default store

/src/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './app/App'
import * as serviceWorker from './serviceWorker'

import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

【问题讨论】：

您发布的代码中的任何地方都没有调用挂钩。
欢迎来到我的困惑。我没有在任何我知道的地方使用钩子。
在您的代码中查找 useSeletor，您没有发布任何组件，所以我不知道您是否发布了。
我不在任何地方使用 useSelector、useState 和 useEffect。
你使用什么版本的 react、react-redux、react-dom 和 redux-toolkit

标签： reactjs typescript redux react-redux redux-toolkit

【解决方案1】：

事实证明这非常简单：我从来没有跑过yarn add react-redux redux

在导入 react-redux 和 redux 时，VSCode 智能感知识别了它们。这些包也已经在我的 node_modules 文件夹中找到了。这两件事让我认为这些软件包已经被添加/安装了。

只需运行 yarn add react-redux redux 即可解决问题。

【讨论】：

太棒了。我有同样的问题，“yarn add react-redux redux”对我没有帮助......
我必须将cd 关闭一个文件夹，然后再次运行该命令。很奇怪，即使我在错误的目录中，一切似乎都很好......
添加这个也让我受益匪浅，但我没有忘记。我是在 server/api 目录中而不是在客户端目录中完成的。以防万一其他人进行了安装，请检查目录。

【解决方案2】：

对于研究此主题的未来用户：我遇到了同样的问题，但使用了节点包管理。我只需要使用：npm install react-redux 和npm install redux 安装它。如有必要，请在客户端子文件夹中尝试。

【讨论】：