Reactjs 为什么React组件更新没有'；行不通

我想了解react redux，我完全不知道为什么组件没有更新。我认为没有更新任何内容，因为react没有深入了解上下文变化的深度。但即使有这些想法，我也不知道该怎么办。请帮帮我，我累了

const MainContext = React.createContext(null);

const createStore = (reducer, initialState) => {
  let currentState = initialState;
  let listeners = [];

  const getState = () => currentState;
  const dispatch = (action) => {
    currentState = reducer(currentState, action);
    listeners.forEach((listener) => listener());
  };

  const subscribe = (listener) => listeners.push(listener);
  return { getState, dispatch, subscribe };
};

我想错误就在这里的某个地方

const useSelector = (selector) => {
  const ctx = React.useContext(MainContext);
  if (!ctx) {
    return 0;
  }
  return selector(ctx.store.getState());
};

const useDispatch = () => {
  const ctx = React.useContext(MainContext);
  if (!ctx) {
    return () => { };
  }
  return ctx.store.dispatch;
};

const Provider = ({ store, context, children }) => {

  const Context = context || MainContext;
  return <Context.Provider value={{ store }}>{children}</Context.Provider>

};

const useSelector=（选择器）=>{
const ctx=React.useContext（MainContext）；
如果（！ctx）{
返回0；
}
返回选择器（ctx.store.getState（））；
};
const useDispatch=（）=>{
const ctx=React.useContext（MainContext）；
如果（！ctx）{
return（）=>{}；
}
返回ctx.store.dispatch；
};
常量提供程序=（{store，context，children}）=>{
const Context=Context | | main Context；
返回{children}
};

应用程序

const UPDATE\u COUNTER=“UPDATE\u COUNTER”；
const CHANGE\u STEP\u SIZE=“CHANGE\u STEP\u SIZE”；
常量updateCounter=（值）=>({
类型：更新计数器，
有效载荷：值，
});
常量changeStepSize=（值）=>({
类型：更改步长大小，
有效载荷：值，
});
const defaultState={
柜台:1,，
步长：1，
};
const reducer=（state=defaultState，action）=>{
开关（动作类型）{
案例更新\u计数器：
返回{
……国家，
计数器：state.counter+action.payload，
};
案例变更\步骤\大小：
返回{
……国家，
步长：+action.payload，
};
违约：
返回状态；
}
};
常量计数器=（）=>{
常量计数器=使用选择器（（状态）=>state.counter）；
const stepSize=useSelector（（state）=>state.stepSize）；
const dispatch=usedpatch（）；
返回(
分派（updateCounter（-stepSize））}>-
{计数器}
分派（更新计数器（步长））}>+
);
};
常数步长=（）=>{
常量步长=使用选择器(
（状态）=>state.stepSize，
（当前，上一个）=>当前===上一个
);
const dispatch=usedpatch（）；
返回(
Значение счётчика должно увеличиваться или уменьшаться на заданную
величину шага
ааааааааааааааа{步长}
分派（changeStepSize（target.value））}
/>
);
};
ReactDOM.render(
,
document.getElementById（“应用程序”）
);

您的

useSelector

钩子实现错误，因为它从未订阅商店。因此，它在更新后将永远不会再次检查状态-仅当组件由于某些其他原因重新渲染时

有关React Redux实际工作原理的详细信息，请参阅我的博文和演讲

const UPDATE_COUNTER = "UPDATE_COUNTER";
const CHANGE_STEP_SIZE = "CHANGE_STEP_SIZE";

const updateCounter = (value) => ({
  type: UPDATE_COUNTER,
  payload: value,
});
const changeStepSize = (value) => ({
  type: CHANGE_STEP_SIZE,
  payload: value,
});

const defaultState = {
  counter: 1,
  stepSize: 1,
};
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case UPDATE_COUNTER:
      return {
        ...state,
        counter: state.counter + action.payload,
      };
    case CHANGE_STEP_SIZE:
      return {
        ...state,
        stepSize: +action.payload,
      };
    default:
      return state;
  }
};

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const stepSize = useSelector((state) => state.stepSize);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(updateCounter(-stepSize))}>-</button>
      <span> {counter} </span>
      <button onClick={() => dispatch(updateCounter(stepSize))}>+</button>
    </div>
  );
};
const Step = () => {
  const stepSize = useSelector(
    (state) => state.stepSize,
    (current, prev) => current === prev
  );
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        Значение счётчика должно увеличиваться или уменьшаться на заданную
        величину шага
      </div>
      <div>Текущая величина шага: {stepSize}</div>
      <input
        type="range"
        min="1"
        max="5"
        value={stepSize}
        onChange={({ target }) => dispatch(changeStepSize(target.value))}
      />
    </div>
  );
};

ReactDOM.render(
  <Provider store={createStore(reducer, defaultState)}>
    <Step />
    <Counter />
  </Provider>,
  document.getElementById("app")
);