TIP SHARE DEVELOP

TIP - HTML/CSS ❤️✅

TIP - ANGULAR { Structure + Custom }❤️✅

TIP - THE COMPONENT DEV KIT ( CDK )❤️✅

TIP - JAVASCRIPT ❤️✅

TIP - TYPESCRIPT❤️✅

TIP - RXJS ❤️✅

TIP - CODE ❤️✅

TIP - CODE :: SYNTAX ❤️✅

TIP - REACTJS ❤️✅

TIP - REACTJS: SYNTAX ❤️✅

TIP - PACKAGE::ANGULAR

TIP -PACKAGE::REACTJS ❤️✅

Explore

TIP -PACKAGE::REACTJS ❤️✅

TIP -PACKAGE ❤️✅

~~~~~

✅Tạo ID generates - uuid npm

***REDUX❤️

Concept::

::Redux là gì

~ Là 1 state management tool

+ Tách state(data) ra khỏi app để quản lý, thêm xóa sửa và UI sẽ auto update data when change.

+ Trong redux state là 1 obj, là data

✅combineReducers(reducers)

~ Chia nhỏ chức năng, quản lý state riêng biệt

—————————————————————————————————————

***MUI❤️

Syntax::

sx={{

display: { md: 'none' },

visibility: { xs: 'hidden', md: 'visible' },

}}

DEMO::✅

import { createSlice } from '@reduxjs/toolkit';

import { useCallback } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { StateType } from './redux-store';

const initialState = {

list: [] as { id: number }[],

title: '',

};

const todoReducer = createSlice({

name: 'todo',

initialState,

reducers: {

_addTodo: (state, action) => {

state.list.unshift(action.payload);

_setTitle: (state, action) => {

state.title = action.payload;

});

const { reducer, actions } = todoReducer;

interface Return {

list: { id: number }[];

title: string;

addTodo: (data: string) => void;

setTitle: (title: string) => void;

}

const useTodo = (): Return => {

const { list, title } = useSelector((state: StateType) => state.todo);

const dispatch = useDispatch();

const { _addTodo, _setTitle } = actions;

const addTodo = useCallback((data: string) => {

dispatch(_addTodo(data));

}, []);

const setTitle = useCallback((title: string) => {

dispatch(_setTitle(title));

}, []);

return {

list,

title,

addTodo,

setTitle,

};

export { useTodo };

export default reducer;

—————————————————————————————————————

***React-query❤️

::Concept ❤️❤️❤️

→ Quản lý dữ liệu từ phía server.

*cacheTime: Thời gian data được lưu cache tồn tại. Nếu hết thời gian, giá trị của query tương ứng với key này sẽ là undefined.

*staleTime: Thời gian data trong cache được tính là mới, tức là nếu data query này trong cache được tính là mới thì khi gọi query sẽ không call queryFuntion để lấy dữ liệu cập nhật vào cache nữa. "Còn mới thì gọi api làm gì". Mặc định staleTime là 0, tức là cứ dùng query sẽ gọi đến queryFunction.

→ Giải thích: staleTime là thời gian của data trong cache vẫn được tính là mới(fesh), nếu hết time thì data trong cache được tính là cũ (stale). → Trong thời gian data là fesh, khi chuyển trang khác và quay về, data sẽ không refesh mà vẫn lấy data từ cache(nếu cache không tồn tại, nó sẽ call API để lấy data)

✅Lợi ích + Windown focus refetching: Khi user rời khổ tab app, RQ sẽ đánh dấu dât đó là “CŨ”, và fetch khi user quay trở lại

+ Request retry: Ta có thể đặt số lần refetch khi gặp lỗi.

+ Prefetching: Neesuapp cần data mới sau khi update, user có thể query data bằng 1 từ khóa cụ thể,

+ Optimize update: khi muốn sửa or xóa 1 phần tử trong list, bạn có thể đưa ra bản update list lạc quan

✅How to Fetch Data!

→ nếu tập data thứ 2 mà giống với tập data thứ nhất, thì RQ sẽ giữ cả 2 làm tham chiếu mà không buộc tải lại.

—————————————————————————————————————

::Hook API ❤️❤️❤️

✅useQuery (read)

*Syntax: const { a, b, c...props} = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })

const { data, isLoading } = useQuery(”Key”, fn: () => void);

::Break code

→ “Key”: là key để lấy data từ cache, nếu dùng chung thì các đầu api trả về sẽ trả cho tất cả → giống như global state

→ fn: là function thực hiện get data

→ options: chú ý những thuộc tính này

+ cacheTime: Infinity, //Thời gian cache data, ví dụ: 5000, sau 5s thì cache sẽ bị xóa, khi đó data trong cache sẽ là undefined, khi đó nó sẽ call để lấy data. + staleTime: 10000, //Thời gian data trong cache được làm mới, nếu trong time này query được gọi thì nó sẽ lấy từ cache ra, nếu ngoài time này thì nó sẽ call api queryFn

+ refetchOnWindowFocus: false,

✅useMutation (create/update/delete) → Sd để update/delete/create data new

→ Cung cấp allow access vào fn Mutation, có thể truyền đối số trực tiếp, sau đó trả về trạng thái thông tin api request

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.