如何使用CreateSelectorHook（）

Question

我在 codesandboxboxboxboxboxbox ：无法读取未定义的属性（读取'getState'）

使用 createSelectorHook（）？有人可以创建一个代码框来说明其用法吗？

index.js：

import React from "react";
import { createRoot } from "react-dom/client";
import { createStore } from "redux";
import reducer from "./reducer";
import App from "./App";
import myContext from "./context";
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from "react-redux";

export const useStore = createStoreHook(myContext);
export const useDispatch = createDispatchHook(myContext);
export const useSelector = createSelectorHook(myContext);

const store = createStore(reducer, 0);
const root = createRoot(document.getElementById("root"));

root.render(
  <Provider store={store} context={myContext}>
    <App />
  </Provider>
);

app.js：

import React, { useState, useRef } from "react";
import { useSelector, useDispatch } from "./";
import context from "./context";

const Counter = (props) => {
  return (
    <context.Provider value={props}>
      <A />
    </context.Provider>
  );
};

const A = (props) => {
  return <B />;
};

const B = (props) => {
  return <C />;
};

const C = (props) => {
  const v = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
          value:<span>{v}</span>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
    </div>
  );
};

const App = () => {
  const stepInput = useRef(1);
  const [step, updateStep] = useState(1);
  return (
    <div>
      step:
      <input
        ref={stepInput}
        type="number"
        onChange={() => updateStep(stepInput.current.value)}
      />
      <Counter step={step} />
    </div>
  );
};

export default App;

Answer 1

我认为React-Redux v8.0.0删除了 defaultrootState （推断状态）：

Now that React-Redux itself is written in TS, we've opted to remove the DefaultRootState type entirely. State generics now default to unknown instead.

来源：发行笔记

so， streateStorehook 如果您想（a）绑定到自定义上下文或（b）确保呼叫 usestate（）。 返回正确键入的redux商店。

请注意，如果这是（b）的正确甚至建议的用例，我不是积极的。我还发现，这是按照 useAppdisPatch 的记录示例的工作作用的：

export const useAppStore = () => useStore<RootState>();

Answer 2

在Redux 4.0中，“ createstore”被弃用，您可以使用“ configurestore”。请参阅以下代码：

import React from 'react';
import App from './App';
import { configureStore } from '@reduxjs/toolkit';
let initialState = {
 counter: 0,
};
function counterReducer(state = initialState, action) {
 if (action.type === 'increment') {
    return { counter: state.counter + 1 };
 } else if (action.type === 'decrement') {
    return { counter: state.counter - 1 };
 } else {
    return state;
 }
}
const store = configureStore({
 reducer: counterReducer,
 preloadedState: initialState,
});
console.log(store.getState, 'redux store');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
    <App />
 </React.StrictMode>
);