Hướng dẫn update state trong react redux

[yecal (yecal Phạm)]

Xin chào,
Em tạo 1 state ABC dùng cho toàn app

const initialState = {
    ABC : [1,2,3]
  }

Sau đó em tạo reducer để update state ABC

reducer(state = initialState, action) {
    switch (action.type) {
    case "UPDATE":
      // ABC ====>>> [1,2,3,4,5]
    default:
      return state;
    }
  }

Cho em hỏi trong reducer có tham chiếu đến ABC không ạ ? kết quả trả về là ABC đã bị thay đổi hay là kiểu pass by value lấy ABC chỉnh sửa rồi trả về kết quả nhưng ABC không thay đổi ?

“The only way to update a state inside a store is to dispatch an action and define a reducer function to perform tasks based on the given actions. Once dispatched, the action goes inside the reducer functions which performs the tasks and return the updated state to the store. This is what Redux is all about.”

Theo như ý này thì store sẽ trả về state hoàn toàn mới ABC’ khác với ABC ?

Em cảm ơn.

[Lovemagic]

Mới hay không phụ thuộc vào bạn viết code.

Ví dụ:

a = [1,2,3];
b = a.push(4);
console.log(a) // [1,2,3,4]

Đây là mutate state, tức là a đã bị thay đổi, không còn mang giá trị ban đầu.
Để giữ nguyên giá trị bạn sử dụng concat hoặc destruct, trong ví dụ này mình dùng concat

a = [1,2,3];
b = a.concat(4);
console.log(a) // [1,2,3]

Reducer chỉ là 1 hàm, nhận vào 2 tham số, state cũ và action, trả về state mới. Không có gì đặc biệt.
Việc bạn viết code bên trong reducer phải tuân theo nguyên tắc trên, là không mutate state.

[yecal (yecal Phạm)]

@Lovemagic Bạn ơi cho mình hỏi thêm, state mặt định là ABC , reducer trả về ABC’ dựa trên ABC thì ABC’ nó được lưu ở đâu vậy bạn?

[Lovemagic]

mình k tìm hiểu về phần này, thường khi khai báo x = 1; mình chỉ quan tâm tới giá trị, không đi sâu vào x lưu ở chỗ nào

[yecal (yecal Phạm)]

@Lovemagic bạn ơi nếu mình dùng axios call API trong reducer được không bạn? mình test rồi mà bị vấn đề như này: Khi có một acction thì reducer trả về kết quả ngay lập từ còn axios thì khoảng 5 giây sau mới ra kết quả(xử lý bất đồng bộ) Mà componentDidMount lại không dùng được trong store nữa. Mong bạn tư vấn giúp

[Lovemagic]

câu hỏi trên về api call đã có trong định nghĩa và ví dụ của redux, bạn đọc thêm tài liệu nhé, học riêng trên trang chủ thôi là đủ rồi

[kiencon]

Call api thường đặt trong Redux middleware, có nhiều loại như redux saga, redux thunk… saga dùng generator để synchronize, trong reducer chỉ có nhiệm vụ update state.