Состояние Simple React Redux возвращает undefined

Question

Я полностью озадачен этим. Я построил простейший из простых компонентов React redux, который в настоящее время показывает только счетчик, хранящийся в магазине. Однако этот счетчик всегда возвращается как неопределенный!

Я ожидал, что счетчик вернется 0 как это то, что установлено в редукторе!

Я следил за бесчисленным количеством руководств и ни к чему не пришел!

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import counterReducer from './reducers/counterReducer';

const store = createStore(counterReducer);

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

а также

//app.js

import React from 'react';
import { useSelector } from 'react-redux'; 


function App() {
  const counter = useSelector(state => state.counter)
  return (
    <div className="App">
      <p>{`counter is ${counter}`}</p>
    </div>
  );
}

export default App;

а также

//actions.js

export const add = (nr) =>{
    return {
        type: 'ADD',
        payload:{
            nr
        }
    }
}

а также

//counterReducer.js

const counterReducer = (state=0, action) => {
    switch(action.type){
        case "ADD":
            return state+1;
        default:
            return state;
    }
}

export default counterReducer;

Итак, как видите, это очень простая установка. Я ожидал, что счетчик вернется0 так как это начальное состояние, установленное в counterReducer.js

Однако я просто получаю "counter is undefined" на интерфейсе!

Answer 1

Либо удалить .counter от государства

// already a number
const counter = useSelector(state => state)

---

или добавить counter к вашему корневому объекту redux:

import {createStore, combineReducers } from 'redux';
import counterReducer from './reducers/counterReducer';

const store = createStore(combineReducers({counter: counterReducer});