reactjs - TypeError: __WEBPACK_IMPORTED_MODULE_3__ is not a function

Question

I'm working on a todo list in my current project. I can display the todo list but when I click the checkbox to mark a task as complete I get this TypeError:

I've tried to use Google and Stack to find an answer but still can't figure out what it is I'm doing wrong. Why is toggleComplete not a function?

Reducer / 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
        }
    }
})

Component / 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>
            ))}
        </>
    )
}

question from:https://stackoverflow.com/questions/65835662/typeerror-webpack-imported-module-3-is-not-a-function

Answer 1

It should be

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!
   }
})