ошибка с redux - нельзя вызвать метод getState() у undefined

Начал изучать redux и при таком коде:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { createStore } from "redux";
import { Provider } from "react-redux";

const defaultState = {
  cash: 0,
};

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case "ADD_CASH":
      return { ...state, cash: state.cash + action.payload };

    default:
      return state;
  }
};

const store = createStore(reducer);

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

и таком:

import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const cash = useSelector((state) => state.cash);
  console.log(cash);

  return <div></div>;
}

export default App;

Выводятся данные ошибки: введите сюда описание изображения


Ответы (1 шт):

Автор решения: Armen
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { createStore } from "redux";
import { Provider } from "react-redux";

const defaultState = {
  cash: 0,
};

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case "ADD_CASH":
      return { ...state, cash: state.cash + action.payload };

    default:
      return state;
  }
};

const store = createStore(reducer);

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

провайдеры нужны что бы пробросить данные дочерним элементам без необходимости передачи этих данных через props

хуки { useDispatch, useSelector } обрашяются к провайдеру напримую и дастают данные или записивают туда данные. Ты почему то передаеш как props store компоненту App.

→ Ссылка