我正在使用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。
我想使用configureStore
形式的@reduxjs/toolkit
包,而不是过时的createStore
从redux
包。
你知道我该怎么做吗?
1条答案
按热度按时间anauzrmj1#
相当于
这意味着将在
state.counter
处找到来自counterSlice
的数据。旧代码执行
createStore(counterSlice)
,这意味着来自counterSlice
的数据将在state
处找到。因此,这两种方法都有效,但您必须根据您的操作从不同的位置选择数据。
您的选择器
必须是
得双曲余切值.