React-Redux中this.props.counter始终为null的问题求助

问题根源 #

核心错误出在src/index.js的Redux Store配置中：你使用configureStore时，错误地将合并后的reducer以{combineReducers}的形式传入，导致Redux的state结构变成{ combineReducers: { counter: 1 } }，而非预期的{ counter: 1 }。因此在mapStateToProps中访问state.counter时找不到对应值，返回null。

另外你的代码还漏导入了Provider组件，这会导致组件无法连接到Redux Store，必须补上。

修复方案 #

修改src/index.js的Store配置，同时补上Provider的导入：

// src/index.js
import React from 'react';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { configureStore } from '@reduxjs/toolkit'
import CustomCounter from './add'
import mySaga from './sagas';
import { createRoot } from "react-dom/client";
import { Provider } from 'react-redux'; // 补上Provider导入

const sagaMiddleware = createSagaMiddleware();

export const store = configureStore({
  reducer: rootReducer, // 直接传入合并后的reducer，而非{combineReducers}
  // 补充：保留RTK默认中间件，再添加saga中间件
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
})

sagaMiddleware.run(mySaga);  

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <Provider store={store}>
    <CustomCounter />
  </Provider>
);

其他代码验证 #

你的reducers、actions、sagas逻辑均无问题：

• src/reducers/counter.js正确设置了初始值1，INCREMENT动作处理逻辑正常
• src/actions/index.js的动作创建函数符合要求
• src/sagas/counter.js的异步延迟触发逻辑正确

修复后，mapStateToProps中的state.counter将正确获取初始值1，点击自增/异步自增按钮也能正常更新数值。

内容的提问来源于stack exchange，提问作者Dong Yan Huo