Breaking News: Grepper is joining You.com. Read the official announcement!

zustand

Marwen Labidi answered on August 2, 2022 Popularity 3/10 Helpfulness 8/10

answer zustand

related zustand

zustand

Comment

// create zustand store
import create from 'zustand';

import {devtools, persist} from 'zustand/middleware'

const courseStore = (set) => ({
    courses: [],
    addCourse: (course) => {
        set((state) => ({
            courses: [course, ...state.courses],
        }))
    },
    removeCourse: (courseId) => {
        set((state) => ({
            courses: state.courses.filter((c) => c.id !== courseId)
        }))
    },
    toggleCourseStatus: (courseId) => {
        set((state) => ({
            courses: state.courses.map((course) => course.id === courseId ? {...course, completed: !course.completed} : course)
        }))
    }
})

const useCourseStore = create(
    devtools(
        persist(courseStore, {
            name: "courses",
        })
    )
)


export default useCourseStore;




// use state in another component
  const {courses, removeCourse, toggleCourseStatus} = useCourseStore(
        (state) => ({
            courses: state.courses,
            removeCourse: state.removeCourse,
            toggleCourseStatus: state.toggleCourseStatus
        })
    )

Popularity 3/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: javascript zustand

Link to this answer
Share Copy Link

Contributed on Aug 02 2022

Marwen Labidi

0 Answers Avg Quality 2/10

Closely Related Answers

zustand

Comment

import create from 'zustand';

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: zustand whatever

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

Imran Khan

0 Answers Avg Quality 2/10

zustand

Contents

More Related Answers

zustand

Closely Related Answers

zustand

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.