Todo App with useReducer() hook | Hiểu rõ hơn về useReducer()
HTML-код
- Опубликовано: 15 сен 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong video này chúng ta sẽ đến với một ứng dụng Todo App with useReducer() hook | Hiểu rõ hơn về useReducer()
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
Lại phải cảm ơn anh rất nhiều, em đã học được rất nhiều khóa học chất lượng từ anh. Chúc anh luôn có sức khỏe, có cảm hứng để sản xuất thêm nhiều khóa học chất lượng nữa cho cộng đồng ạ
1. Initial value
2. action
3. reducer
4. dispatch
const [state, dispatch] = useReducer(, )
The `reducer` function contains your custom state logic and the `initialState`can be a simple value but generally will contain an object.
The `useReducer` Hook returns the current `state`and a `dispatch`method
Đang ngồi học clip của anh định xem youtube giải trí tí thì quả thumbnail lại đập vào mặt =))
thật sự cảm ơn anh rất nhiều ạ, em học vừa code lại được theo useReducer, vừa theo useState được
ông nào làm thumbnail công nhận xịn xò thật sự, nhìn là muốn bấm vào xem r :)))
E cảm ơn vì bài học bổ ích của a. Nếu có thời gian rảnh, a làm thêm video về Redux với Redux-Saga hoặc những thư viện đi kèm với React như Reactive-Form ,hay axios a nhá
gái ham học thế, ngưỡng mộ :v
@@ThangTran-hi3es có khi ông đang nói chuyện với đàn ông đấy =))
@@HuyNguyen-qp9cn nghi lắm, mấy chú giả gái để đc ưu ái lắm
Anh Sơn dạy rất hay và có tâm. Nếu Anh có thể làm 1 series dạy về lập trình C, C++ hay JaVa thì tốt quá ạ !!
C++ có rùi đó bạn
Quả thumbnail chất lượng thật sự😂😂
Bài rất dễ hiểu. Anh có thể ra thêm video sử dụng useReducer để render các Object lồng nhau được không ạ
Về phần input onChangr cho em hỏi là tại sao mình không dùng ref rồi khi nào add thì mình mới dùng e.target.value thôi ạ, mình re-render component kiểu này có tốt về trải nghiệm không ạ?
Tại ảnh in cái job ra nếu kh liên tục setjob thì nó kh render, hong biết đúng v kh nữa
Giờ mới biết anh sơn cũng có tính khiếu hài khi nhìn vào thumnail 😀
Nhìn thumbnail là muốn học rồi =))
Ngồi nghe anh giảng em say quá 😂😂😂
Quả thumbnail chất quá a ưi :))
Cảm ơn a nhiều, A có thể hướng dẫn làm speech to text bên react native được không ạ.
Đang lướt tìm video giải trí thấy quả thumbnail :))))))))))
cảm ơn anh Sơn, video rất hay.
cho em hỏi sao em setLocalstorage mỗi lần em f5 lại nếu không thêm giá trị thì vẫn còn, nhưng nếu thêm giá trị mới thì giá trị cũ mất hết ạ thay bằng giá trị mới. em cảm ơn
thumbnail đỉnh vậy a :D
cảm ơn anh
cho e hỏi nếu đã là hằng thì viết hoa thế sao mấy thằng khác cũng là const mà k phải viết hoa?
ở dòng 57, nếu newJobs em không spread ra (const newJobs = state.jobs) thì 1 lần xóa nó sẽ mất 2 phần tử liền kề nhau, mà khi console.log(newJobs) sau khi splice thì em chỉ thấy có 1 phần tử bị xóa, vậy mà trên UI bị mất 2 phần tử là sao vậy ạ?
cùng câu hỏi ạ
giải thích hết thì hơi dài dòng nhưng nói chung bạn sai ở chỗ là nếu ko dùng spread operator mà dùng const newJobs = state.jobs thì newJobs sẽ chỉ là 1 reference của state.jobs thôi nên sau đó khi dùng newJobs để xửa lí logic tiếp thì kết quả cuối cùng ra sẽ ko như ý muốn (vì ngay lúc đầu tiên đã sai thì cái cuối cùng ko thể đúng được).
@@free2idol1 t cũng đang thắc mắc đoạn này. Nếu không phiền bạn có thể giải thích được không ạ? Hay có bài viết nào về nó không ạ
@@HoangHuy-md8ng
React của bạn chỗ file index.js để nên reducer() sẽ bị gọi 2 lần (bạn upgrade lên react 18 sẽ thấy reducer được gọi 2 lần)... và khi bạn dùng const newJobs = state.jobs thì newJobs cũng chính là state.jobs... sau đó khi bạn splice() nó sẽ remove 1 property của newJobs thì state.jobs cũng bị removed 1 phần tử. Và ở lần call thứ 2 thì cũng lặp lại tình trạng như vậy. Cuối cùng khi render ra thì phần tử đầu tiên và kế nó sẽ bi removed.
Ảnh nền thú vị thế ạ :))
bài này xoắn não quá a ạ x_x
Thầy có thể ra video dạy về react native không ạ
khá dễ hiểu
Quả thumbnail cười chết 😂
Anh Sơn có thể quay một video về JWT được không ạ
const handleAdd = () => {
dispatch(addJob(inputRef.current.value))
dispatch(setJob(''))
inputRef.current.focus()
}
funct Add
điều chỉnh lại trong input, bỏ onChange + value.
M k giỏi giải thích, phiền Sơn expland hộ mình
9:52 kiểu dữ liệu của action.type là string sao dùng được case là SET_JOB vậy anh ?
SET_JOB là constants thôi mà em, trong ví dụ này thì nó lưu string đấy em
Lúc ô input nó trống, anh nhấn add nó vẫn nhận vào mảng luôn ấy ạ
Ok anh Sơn lao công :)
thumbnail chất quá a :v
tại sao lại gán value input vào state làm gì ạ, e thấy mỗi lần thây đổi value thì rerender
Để binding dữ liệu nhập tại input vào state đó em. Khi làm việc với dữ liệu của input thì ta sẽ thao tác với state tương ứng. Ngoài ra, em có thể dùng state của chính input truyền vào value props của input, điều này giúp binding dữ liệu 2 chiều (input thay đổi state cũng thay đổi, state thay đổi dữ liệu trong input cũng thay đổi). Từ đó, ta có sự đồng nhất giữa UI (giao diện người dùng) và dữ liệu/trạng thái ứng dụng. Ví dụ, để viết logic xoá text trong 1 input thì ta sẽ set state của input đó về chuỗi rỗng.
@@F8VNOfficial cảm ơn anh
dispatch(addJob(job)) ở trên liền với dispatch(setJob('')) ở dưới, nó chạy bất đồng bộ đúng ko anh
kkk ko co dau man
nếu mọi người học đầy đủ vài hôm video này nhiều view nhất cho xem =)))
Rồi bài sau là Redux phải không anh !
mong a sớm có video redux ^^
Hảo thumbnail XD
Bài khó thật anh
clip ngắn mà mất 1 tiếng rưỡi để hiểu và code lại =))
Thumb nail hài vãi 😁😁😁
Love youu