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
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á
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 ạ?
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
ở 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 ạ?
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 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.
Để 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.
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
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
Đ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 =))
ô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
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 ạ
Quả thumbnail chất lượng thật sự😂😂
cảm ơn anh Sơn, video rất hay.
Ngồi nghe anh giảng em say quá 😂😂😂
Quả thumbnail chất quá a ưi :))
cảm ơn anh
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 ạ.
khá dễ hiểu
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 =))
thumbnail đỉnh vậy a :D
bài này xoắn não quá a ạ x_x
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
Ok anh Sơn lao công :)
thumbnail chất quá a :v
Đang lướt tìm video giải trí thấy quả thumbnail :))))))))))
Ảnh nền thú vị thế ạ :))
Anh Sơn có thể quay một video về JWT được không ạ
Quả thumbnail cười chết 😂
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
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
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 ạ
Love youu
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
Hảo thumbnail XD
nếu mọi người học đầy đủ vài hôm video này nhiều view nhất cho xem =)))
mong a sớm có video redux ^^
Rồi bài sau là Redux phải không anh !
ở 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.
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
Thumb nail hài vãi 😁😁😁
Bài khó thật anh
clip ngắn mà mất 1 tiếng rưỡi để hiểu và code lại =))
Thầy có thể ra video dạy về react native không ạ