Todo App with useReducer() hook | Hiểu rõ hơn về useReducer()
Ғылым және технология
👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
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.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
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.
Пікірлер: 57
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
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 ạ
Đ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 :)))
cảm ơn anh Sơn, video rất hay.
Quả thumbnail chất quá a ưi :))
thumbnail đỉnh vậy a :D
Ngồi nghe anh giảng em say quá 😂😂😂
Quả thumbnail chất lượng thật sự😂😂
thumbnail chất quá a :v
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 ạ
bài này xoắn não quá a ạ x_x
Ok anh Sơn lao công :)
Ảnh nền thú vị thế ạ :))
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 ạ.
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á
@ThangTran-hi3es
Жыл бұрын
gái ham học thế, ngưỡng mộ :v
@HuyNguyen-qp9cn
Жыл бұрын
@@ThangTran-hi3es có khi ông đang nói chuyện với đàn ông đấy =))
@ThangTran-hi3es
Жыл бұрын
@@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á ạ !!
@sonlengoc948
10 ай бұрын
C++ có rùi đó bạn
khá dễ hiểu
cảm ơn anh
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 =))
Love youu
Thầy có thể ra video dạy về react native không ạ
Quả thumbnail cười chết 😂
Anh Sơn có thể quay một video về JWT được không ạ
Đang lướt tìm video giải trí thấy quả thumbnail :))))))))))
mong a sớm có video redux ^^
Rồi bài sau là Redux phải không anh !
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
Hảo thumbnail XD
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 ạ?
@nguyenthang7850
2 ай бұрын
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
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?
Lúc ô input nó trống, anh nhấn add nó vẫn nhận vào mảng luôn ấy ạ
9:52 kiểu dữ liệu của action.type là string sao dùng được case là SET_JOB vậy anh ?
@F8VNOfficial
2 жыл бұрын
SET_JOB là constants thôi mà em, trong ví dụ này thì nó lưu string đấy em
ở 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 ạ?
@linhhhuyenn_6099
2 жыл бұрын
cùng câu hỏi ạ
@free2idol1
2 жыл бұрын
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).
@HoangHuy-md8ng
2 жыл бұрын
@@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 ạ
@free2idol1
2 жыл бұрын
@@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.
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
dispatch(addJob(job)) ở trên liền với dispatch(setJob('')) ở dưới, nó chạy bất đồng bộ đúng ko anh
@master-front-end
Жыл бұрын
kkk ko co dau man
Thumb nail hài vãi 😁😁😁
nếu mọi người học đầy đủ vài hôm video này nhiều view nhất cho xem =)))
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
@F8VNOfficial
2 жыл бұрын
Để 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.
@uctamnguyen1593
2 жыл бұрын
@@F8VNOfficial cảm ơn anh
clip ngắn mà mất 1 tiếng rưỡi để hiểu và code lại =))
Bài khó thật anh