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

zustand react native

Zidane (Vi Ly - VietNam) answered on January 11, 2023 Popularity 9/10 Helpfulness 4/10

answer zustand react native

zustand react native

Comment

// This simple exmaple for management state in Zustand 
// variable is for number, array
// store/votes/index.tsx
import create from "zustand"
 
interface voteState {
    votes: number;
    arrVotes: Array<string>;
    addVotes: () => void;
    subtractVotes: () => void;
}

const useStore = create<voteState>((set, get) => ({
    votes: 0, 
    arrVotes: [],

    // C1 ko can truyen tham so
    addVotes: () => set(state => ({
        votes: state.votes + 1
    })),
    addArrayVotes: (vote) => set(state => ({
         arrVotes: [...state.arrVotes, vote]
    }))
    subtractVotes: () => set(
        state => ({
            votes: state.votes - 1   
        })
    ),
    action: () => {
        const userVotes = get().votes 
    }

}))

export default useStore;

// pages/admin/votes/index.tsx
import useStore from '../../../store/votes';
import React, { useRef } from 'react'

export default function Votes() {
  
     
    const { votes, arrVotes, addVotes, subtractVotes } = useStore() 
    const inputRef = useRef();
    const addArrayVotes = () => {
         addArrayVotes(inputRef.current.Value);
         inputRef.current.Value = ""
    }
    
    return ( 
        <>
            <div className="text-[#00F] text-center p-2 shadow-lg bg-rose-100 w-[500px] mt-20 rounded-full mx-auto">
                { votes } people have cast their votes

            </div> 
            <div className="mx-auto w-24 mt-20 flex  space-x-2">
                <button className="bg-gray-200 px-[20px] py-[10px]" onClick={ addVotes } > +  </button>
                <button className="bg-gray-200 px-[20px] py-[10px]" onClick={ subtractVotes } > - </button>
            </div>
            <input ref={ inputRef } />  
            <button className="bg-gray-200 px-[20px] py-[10px]" onClick={ addArrayVotes } > Add Array Votes </button>
        </>
    )
}

Popularity 9/10 Helpfulness 4/10 Language typescript

Source: Grepper

Tags: react-native typescript zustand

Link to this answer
Share Copy Link

Contributed on Jan 11 2023

Zidane (Vi Ly - VietNam)

0 Answers Avg Quality 2/10

zustand react native

Contents

More Related Answers

zustand react native

Grepper

Documentation

Social

Legal

Contact

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