我正在创建一个简单的计数器应用程序使用reactredux.

以下是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.

知道我怎么才能做到这一点吗?

推荐答案

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

相当于


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

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

您的旧代码是createStore(counterSlice),这意味着counterSlice中的数据将在state找到.

因此,这两种方法都有效,但您必须根据所做的工作从不同的位置 Select 数据.

您的 Select 器

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

一定会是

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

取而代之的是.

Javascript相关问答推荐

WebGL 2.0无符号整数输入变量

在使用HighChats时如何避免Datatables重新初始化错误?

如何修复我的数据表,以使stateSave正常工作?

类构造函数不能在没有用With Router包装的情况下调用

如何将数组用作复合函数参数?

NG/Express API路由处理程序停止工作

使用类型:assets资源 /资源&时,webpack的配置对象&无效

用于部分字符串的JavaScript数组搜索

将相关数据组合到两个不同的数组中

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

bootstrap S JS赢得了REACT中的函数/加载

调用特定数组索引时,为什么类型脚本不判断未定义

固定动态、self 调整的优先级队列

观察子组件中的@Output事件emits 器?

如何从图表中映射一组图表-js使用REACT

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本,我如何才能获得该值?

我如何才能阻止我的球数以指数方式添加到我的HTML画布中?

App Script如何读取通过云函数传递的表单对象

将数据对象代码中缺失的属性添加到单个对象不起作用

为什么属性只应用于第一个元素而不是其各自的元素