javascript - 为什么 createStore 有效而 configureStore 无效？

Question

我正在使用 react 和 redux 创建一个简单的计数器应用程序。

以下是counterSlice.js文件。

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

export const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    changeValueBy(state, action) {
      const value = action.payload;
      state["count"] = state["count"] + value;
    }
  }
});

export const { changeValueBy } = counterSlice.actions;

export const selectCount = (state) => state.count;

export default counterSlice.reducer;

app/store.js 文件如下:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

index.js 文件如下:

import App from "./App";
import store from "./app/store";
import { Provider } from "react-redux"

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

使用此设置，代码不起作用。(完整代码在 this sandbox 中)

但是通过以下设置，store 可以正常工作。

App.js 文件:

import { Counter } from "./features/counter/Counter";
import "./App.css";
import { Provider } from "react-redux";
import { createStore } from "redux";
import counterSlice from "./features/counter/counterSlice";

const store = createStore(counterSlice);

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

整个代码在this sandbox中.

我想使用 @reduxjs/toolkit 包中的 configureStore 而不是来自 redux 的过时的 createStore > 包。

知道如何实现吗？

Answer 1

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

相当于

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

这意味着来自 counterSlice 的数据将在 state.counter 中找到。

您的旧代码执行 createStore(counterSlice)，这意味着来自 counterSlice 的数据将在 state 中找到。

所以，两者都有效，但您必须根据您的工作从不同的地方选择数据。

你的选择器

export const selectCount = (state) => state.count;

必须是

export const selectCount = (state) => state.counter.count;

相反。