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

Question

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

错误消息给出了出现此错误的前 3 个原因，但似乎没有一个适用于我。

React 和 React 的版本不匹配 DOM？我的两个都被列为依赖项并且具有相同的版本。
违反 Hooks 规则？不使用任何我知道的钩子。我所有的组件都是 class 个组件（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')
)

Answer 1

事实证明这很简单：我从来没有运行 yarn add react-redux redux

导入 react-redux 和 redux 时，VSCode intellisense 识别了它们。这些包也已在我的 node_modules 文件夹中找到。这两件事让我认为包裹已经 added/installed.

刚刚运行 yarn add react-redux redux 解决了这个问题。

Answer 2

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

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

Invalid hook call when adding react-redux Provider

typescript

reactjs

redux

react-redux

redux-toolkit