TypeError: __WEBPACK_IMPORTED_MODULE_3__ is not a function

Question

我正在处理当前项目中的待办事项列表。我可以显示待办事项列表，但是当我单击复选框将任务标记为完成时，我得到这个 TypeError:

我尝试使用 Google 和 Stack 来寻找答案，但仍然无法弄清楚我做错了什么。为什么 toggleComplete 不是函数？

减速机/todosOne.js

    import { createSlice } from '@reduxjs/toolkit'

export const todosOne = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, text: 'This is a todo item', complete: false },
        { id: 2, text: 'This is a todo item', complete: false },
        { id: 3, text: 'This is a todo item', complete: false },
        { id: 4, text: 'This is a todo item', complete: false },
        { id: 5, text: 'This is a todo item', complete: false },
    ],

    toggleComplete: (store, action) => {
        const checkedItem = store.items.find(item => item.id === action.payload)
        if (checkedItem) {
            checkedItem.complete = !checkedItem.complete
        }
    }
})

组件/TodoListOne.js

import React from 'react'
import styled from 'styled-components'
import { useSelector, useDispatch } from 'react-redux'

import { todosOne } from '../Reducers/todosOne'

export const TodoListOne = () => {
    const dispatch = useDispatch();

    const items = useSelector(store => store.todos);

    const onChecked = complete => {
        dispatch(todosOne.actions.toggleComplete(complete))
    }

    return (
        <>
            {items.map(todos => (
                <TodoContainer key={todos.id}>
                    <List>
                        <label>
                            <input type="checkbox"
                            checked={todos.complete}
                            onChange={() => onChecked(todos.id)}
                            />
                        </label>
                    </List>
                    <TodoText>{todos.text}</TodoText>
                </TodoContainer>
            ))}
        </>
    )
}

Answer 1

应该是

export const todosOne = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, text: 'This is a todo item', complete: false },
        { id: 2, text: 'This is a todo item', complete: false },
        { id: 3, text: 'This is a todo item', complete: false },
        { id: 4, text: 'This is a todo item', complete: false },
        { id: 5, text: 'This is a todo item', complete: false },
    ],
// here!
 reducers: {
    toggleComplete: (store, action) => {
        const checkedItem = store.items.find(item => item.id === action.payload)
        if (checkedItem) {
            checkedItem.complete = !checkedItem.complete
        }
    }
// here!
   }
})

TypeError: __WEBPACK_IMPORTED_MODULE_3__ is not a function

TypeError: __WEBPACK_IMPORTED_MODULE_3__ is not a function

checkbox

toggle

reactjs

redux