Simple React Redux状态返回undefined

Question

我完全被这个问题难住了。我已经构建了最简单的react redux组件，该组件目前只显示商店中的计数器。然而，此计数器总是以未定义的形式返回！

我希望计数器返回0，因为这是在reducer中设置的！

我已经学习了无数的教程，但我一无所获！

//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中设置的初始状态

然而，我只是得到了"；计数器未定义"；在前端！

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});