React redux错误:未捕获类型错误_store_index_js__WEBPACK_IMPORTED_MODUL

Question

我是Redux的新手。我正在尝试使用redux的计数器，但当我尝试使用递增/递减按钮增加或减少计数器时，我会遇到以下错误：

Uncaught TypeError: _store_index_js__WEBPACK_IMPORTED_MODULE_2__.default.increment is not a function
at increment (App.js:10:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
at dispatchEventsForPlugins (react-dom.development.js:9097:1)
at react-dom.development.js:9288:1

计数器值的状态不变。

App.js

import { useSelector, useDispatch } from 'react-redux';
import './App.css';
import actions from './store/index.js';
function App() {
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
const increment = ()=> {
dispatch(actions.increment());
}
const decrement = () => {
dispatch(actions.decrement());
}
const addBy = () => {
dispatch(actions.addBy(10))
}
return (
<div>
<h1>Counter App</h1>
<h2>{counter}</h2>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={addBy}>Add By 10</button>
</div>
);
}

index.js

import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState : { counter: 0 },
reducers: {
increment(state, action) {
state.counter++;
},
decrement(state, action) {
state.counter--;
},
addBy(state, action) {
state.counter += action.payload;
}
}
})
export const actions = counterSlice.actions;
const store = configureStore({
reducer: counterSlice.reducer
})
export default store;

我错过了什么？非常感谢你的帮助。

Answer 1

应该是

import { actions } from './store/index.js';