为何createStore可用但configureStore无法正常工作？

你的configureStore配置无法正常运行的核心原因是状态选择器(selector)的路径错误。当用configureStore组合reducer时，Redux状态树会按你在store里定义的键值分层，但你的选择器没对应这个层级结构。下面是具体修复步骤：

1. 修正counterSlice.js中的选择器 #

原来的选择器直接取state.count，但configureStore把counter reducer挂载到了state.counter节点下，所以要调整路径：

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    changeValueBy(state, action) {
      // Redux Toolkit允许直接修改状态，这里可以简化写法
      state.count += action.payload;
    }
  }
});

export const { changeValueBy } = counterSlice.actions;

// 修正选择器，对应store中的reducer键名
export const selectCount = (state) => state.counter.count;

export default counterSlice.reducer;

2. 简化App.js的配置 #

由于index.js已经用Provider包裹了整个App，App.js里不需要重复添加Provider，避免嵌套问题：

import { Counter } from "./features/counter/Counter";
import "./App.css";
import logo from "./logo.svg";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Counter />
      </header>
    </div>
  );
}

export default App;

3. 确保Counter组件正确使用状态和dispatch #

你的Counter组件需要用useSelector获取修正后的状态，并用useDispatch触发action：

import { useSelector, useDispatch } from "react-redux";
import { selectCount, changeValueBy } from "./counterSlice";

export function Counter() {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={() => dispatch(changeValueBy(1))}>+1</button>
      <button onClick={() => dispatch(changeValueBy(-1))}>-1</button>
    </div>
  );
}

为什么之前createStore能工作？ #

用createStore时，你直接把counter reducer作为根reducer，状态树是扁平的{ count: 0 }，所以state.count能正确取值。但configureStore是为了方便组合多个reducer设计的，会自动把每个reducer挂载到对应的键名下，因此选择器必须匹配这个嵌套结构。

内容的提问来源于stack exchange，提问作者Harish