我正在创建一个简单的计数器应用程序使用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
.
知道我怎么才能做到这一点吗?