Блог

Я пытаюсь настроить среду redux и не понимаю, почему у меня такое поведение.

У меня есть корневое состояние здесь, в моем редукторе:

 export type RootState = {
  counter: number;
};
const initialState: RootState = { counter: 0 };

const staticLesson = (state = initialState, action: any) => {
  switch (action.type) {
    case "INCREMENT":
      return state.counter   1;
    default:
      return state;
  }
};

export default staticLesson;
  

Затем я объединяю его здесь:

 import staticLesson from "./staticLesson/index";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
  staticLesson,
});

export default rootReducer;
  

Я завершаю свое приложение с поставщиком:

 import { createStore } from "redux";
import rootReducer from "./redux/reducers";
import { Provider } from "react-redux";
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(rootReducer, composeWithDevTools());

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

Тем не менее, когда я пытаюсь зарегистрировать его в своем компоненте, значение не определено.

 const Component = () => {
  const staticLesson = useSelector((state: RootState) => state);   
  const dispatch = useDispatch();

  console.log("counter", staticLesson.counter); <-- logs undefined

  return (
    ...
  )
}
  

Чего я не понимаю, так это почему, если я просто регистрируюсь staticLesson , оно отображается в моей консоли, как и ожидалось. Но если я попытаюсь получить доступ к значению объекта, вместо того, чтобы получать значение 0 для моего счетчика… Я получаю undefined . staticLesson отображается в моих DevTools, оно там… Я в тупике, что я напутал?

Я почти уверен, что вы должны возвращать staticLesson свойство из состояния в вашем useSelector вызове. В useSelector вы возвращаете все состояние. Так и должно быть:

 const staticLesson = useSelector((state: RootState) => state.staticLesson);