https://github.com/jdgabriel/learning-zustand

Learning how to use Zustend with React
https://github.com/jdgabriel/learning-zustand

context-api javas react store zustand

Last synced: 12 days ago
JSON representation

Learning how to use Zustend with React

• Host: GitHub
• URL: https://github.com/jdgabriel/learning-zustand
• Owner: jdgabriel
• License: mit
• Created: 2022-08-27T02:33:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-26T00:17:20.000Z (over 2 years ago)
• Last Synced: 2024-11-08T00:28:28.383Z (2 months ago)
• Topics: context-api, javas, react, store, zustand
• Language: TypeScript
• Homepage:
• Size: 200 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zustand with ReactJS

This repository represents my learning abount Zustand Store

## User Store

```js

import create from "zustand";

import * as uuid from "uuid";

export type UserType = {

  id?: string,

  name: string,

  email: string,

};

type UserState = {

  users: UserType[],

  addUser: (user: UserType) => void,

};

const useUserStore =create((set) => ({

  users: [],

  addUser: (user: UserType) => {

    user.id = uuid.v4();

    set((state) => ({ users: [...state.users, user] }));

  },

}));

export { useUserStore };

```

## How to use

```js

// Just import the hook created in any component

const data = useUserStore();

/*

 * data.users

 * data.addUsers(user)

 */

// Only array of Users

const data = useUserStore((state) => state.users);

// data = users: UserType[];

// Only function for add a User

const data = useUserStore((state) => state.addUser);

// data = addUser: (user: UserType) => void;

```