Estoy trabajando en una lista de tareas pendientes en mi proyecto actual. Puedo mostrar la lista de tareas pendientes, pero cuando hago clic en la casilla de verificación para marcar una tarea como completa, obtengo este TypeError:

this TypeError

Intenté usar Google y Stack para encontrar una respuesta, pero todavía no puedo entender qué es lo que estoy haciendo mal. ¿Por qué toggleComplete no es una función?

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

Componente / 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>
            ))}
        </>
    )
}
0
Therése Larsson 22 ene. 2021 a las 00:02

1 respuesta

La mejor respuesta

Debe ser

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!
   }
})
0
phry 21 ene. 2021 a las 21:25