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

  • @dinhanhtuan22
    @dinhanhtuan22 Жыл бұрын

    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

  • @huynhucthanhtuan7948
    @huynhucthanhtuan79482 жыл бұрын

    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 ạ

  • @hoangminh4824
    @hoangminh48242 жыл бұрын

    Đ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 =))

  • @h_sangg9459
    @h_sangg94592 жыл бұрын

    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

  • @KhangNguyen-kq2iw
    @KhangNguyen-kq2iw2 жыл бұрын

    ô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 :)))

  • @minhhoang576
    @minhhoang5762 жыл бұрын

    cảm ơn anh Sơn, video rất hay.

  • @duynguyentan5679
    @duynguyentan56792 жыл бұрын

    Quả thumbnail chất quá a ưi :))

  • @vuthien9342
    @vuthien93422 жыл бұрын

    thumbnail đỉnh vậy a :D

  • @KienDTPS
    @KienDTPS2 жыл бұрын

    Ngồi nghe anh giảng em say quá 😂😂😂

  • @lenhac9040
    @lenhac90402 жыл бұрын

    Quả thumbnail chất lượng thật sự😂😂

  • @hoquang3755
    @hoquang37552 жыл бұрын

    thumbnail chất quá a :v

  • @BaoTran-ir9xg
    @BaoTran-ir9xg2 жыл бұрын

    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 ạ

  • @dennisnguyen5787
    @dennisnguyen57872 жыл бұрын

    bài này xoắn não quá a ạ x_x

  • @Whyrulookingatmyname
    @Whyrulookingatmyname2 жыл бұрын

    Ok anh Sơn lao công :)

  • @ComradeBao
    @ComradeBao2 жыл бұрын

    Ảnh nền thú vị thế ạ :))

  • @ThaiPham-pc3dm
    @ThaiPham-pc3dm2 жыл бұрын

    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 ạ.

  • @quynhmaixinhgai
    @quynhmaixinhgai2 жыл бұрын

    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

    @ThangTran-hi3es

    Жыл бұрын

    gái ham học thế, ngưỡng mộ :v

  • @HuyNguyen-qp9cn

    @HuyNguyen-qp9cn

    Жыл бұрын

    @@ThangTran-hi3es có khi ông đang nói chuyện với đàn ông đấy =))

  • @ThangTran-hi3es

    @ThangTran-hi3es

    Жыл бұрын

    @@HuyNguyen-qp9cn nghi lắm, mấy chú giả gái để đc ưu ái lắm

  • @tranngocthang5087
    @tranngocthang50872 жыл бұрын

    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

    @sonlengoc948

    10 ай бұрын

    C++ có rùi đó bạn

  • @tienhuynh2435
    @tienhuynh243511 ай бұрын

    khá dễ hiểu

  • @trongcuong7855
    @trongcuong7855Ай бұрын

    cảm ơn anh

  • @sonminhpham8118
    @sonminhpham81182 жыл бұрын

    Giờ mới biết anh sơn cũng có tính khiếu hài khi nhìn vào thumnail 😀

  • @TrungLe-kp9tg
    @TrungLe-kp9tg2 жыл бұрын

    Nhìn thumbnail là muốn học rồi =))

  • @nguyenhoangsinh3367
    @nguyenhoangsinh33672 жыл бұрын

    Love youu

  • @petslover4306
    @petslover43062 жыл бұрын

    Thầy có thể ra video dạy về react native không ạ

  • @inhxuanhanh3978
    @inhxuanhanh39782 жыл бұрын

    Quả thumbnail cười chết 😂

  • @luannguyenthanh1629
    @luannguyenthanh16292 жыл бұрын

    Anh Sơn có thể quay một video về JWT được không ạ

  • @metablibv37
    @metablibv372 жыл бұрын

    Đang lướt tìm video giải trí thấy quả thumbnail :))))))))))

  • 2 жыл бұрын

    mong a sớm có video redux ^^

  • @j1s0o
    @j1s0o2 жыл бұрын

    Rồi bài sau là Redux phải không anh !

  • @transi2844
    @transi2844 Жыл бұрын

    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

  • @maitoshikigami4035
    @maitoshikigami40352 жыл бұрын

    Hảo thumbnail XD

  • @lokissdo9965
    @lokissdo99652 жыл бұрын

    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

    @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

  • @hungoan7699
    @hungoan76992 жыл бұрын

    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?

  • @tuananhnguyen757
    @tuananhnguyen757 Жыл бұрын

    Lúc ô input nó trống, anh nhấn add nó vẫn nhận vào mảng luôn ấy ạ

  • @NamNguyen-sy6ey
    @NamNguyen-sy6ey2 жыл бұрын

    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

    @F8VNOfficial

    2 жыл бұрын

    SET_JOB là constants thôi mà em, trong ví dụ này thì nó lưu string đấy em

  • @thetannguyen9389
    @thetannguyen93892 жыл бұрын

    ở 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

    @linhhhuyenn_6099

    2 жыл бұрын

    cùng câu hỏi ạ

  • @free2idol1

    @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

    @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

    @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.

  • @enzo4828
    @enzo4828 Жыл бұрын

    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

  • @minhvu0906
    @minhvu09062 жыл бұрын

    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

    @master-front-end

    Жыл бұрын

    kkk ko co dau man

  • @congnamle3632
    @congnamle36322 жыл бұрын

    Thumb nail hài vãi 😁😁😁

  • @wangdat
    @wangdat2 жыл бұрын

    nếu mọi người học đầy đủ vài hôm video này nhiều view nhất cho xem =)))

  • @tamlongnguyen6604
    @tamlongnguyen66042 жыл бұрын

  • @uctamnguyen1593
    @uctamnguyen15932 жыл бұрын

    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

    @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

    @uctamnguyen1593

    2 жыл бұрын

    @@F8VNOfficial cảm ơn anh

  • @ucluu2948
    @ucluu2948Ай бұрын

    clip ngắn mà mất 1 tiếng rưỡi để hiểu và code lại =))

  • @nguyenAudio77
    @nguyenAudio772 жыл бұрын

    Bài khó thật anh

Келесі