我一直在试验Redux useDispatch钩子。我做了一个超级简单的应用程序，把笔记作为待办事项列表。直到现在useDispatch似乎对我不起作用，我得到了下面的错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Louaye Mandari\Desktop\redux-todo-list\redux-todo-list\src\App.js: Unexpected token, expected "," (17:26)

  15 |   const handleClicked = (e) =>{
  16 |     e.preventDefault();
> 17 |     dispatch(addTask({text.current.value}))
     |                           ^
  18 |   }
  19 |   return (
  20 |     <div className="App">

应用程序js

import { useSelector,useDispatch } from 'react-redux';
import taskSlice from './redux/taskSlice';
import './App.css';
import { useState,useRef } from 'react';
import { addTask } from './redux/taskSlice';

function App() {
  const data = useSelector(state=>state.tasks)
  const dispatch = useDispatch()
  const text = useRef()
  const handleClicked = (e) =>{
    e.preventDefault();
    dispatch(addTask({text.current.value}))
  }
  return (
    <div className="App"> 
      <button onClick={handleClicked}>
        Enter the new task 
      </button>
      <input type='text' ref = {text} placeholder='write the task here' />  
      <label>{data.task[data.task.length - 1]} </label>
    </div>
  );
}

export default App

任务切片.js：

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

export const taskSlice = createSlice({
  name: 'tasks',
  initialState: {
    task: ['hi'],
  },
  reducers: {
    addTask: (state, action) => {
      state.tasks.push(action.payload);
    },
  },
});

export const { addTask } = taskSlice.actions;
export default taskSlice.reducer;

存储.js：

import { configureStore } from "@reduxjs/toolkit";
import taskReducer from "./taskSlice";

export const store = configureStore({
  reducer: {
    tasks: taskReducer,
  },
});

我正在尝试访问taskslice.js中reducers中的addtask。addtask应该转换新状态，并向任务数组的初始状态添加一个新元素。