简单的 React Redux 状态返回 undefined答案

【问题标题】：Simple React Redux state returns undefined简单的 React Redux 状态返回 undefined
【发布时间】：2020-12-11 13:39:44
【问题描述】：

我完全被这个难住了。我构建了最简单的简单 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 中设置的初始状态

但是我只是在前端得到“计数器未定义”！

【问题讨论】：

state 不是给你的号码吗？ const counter = useSelector(state => state)
太棒了！谢谢@Federkun！这样就解决了！我知道这一定很简单！我真的很感激！
或rootReducer = combineReducers({counter: counterReducer})

标签： reactjs redux react-redux store redux-reducers

【解决方案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});

【讨论】：