Tại sao Redux reducer được gọi là reducer?

Reducer là một pure function nhận input là state trước đó của application và một action từ đó trả về state tiếp theo (previousState, action) => newState. Đây là một khái niệm vô cùng cơ bản và quen thuộc khi ta tiếp cận với redux. Vậy nên hôm nay chúng ta sẽ tìm hiểu tại sao nó lại được quy ước gọi là reducer chứ không phải là một cái tên khác nha. Let’s go :slight_smile:

Nhắc lại về reduce function
Method reduce() được dùng để thực thi một hàm lên từng phần tử của mảng (từ trái sang phải) với một biến tích lũy để thu về một giá trị duy nhất.

reduce

Ví dụ :

[1, 2, 3, 4].reduce((sum, num) => {
    return sum + num;
}, 0);

// Kết qủa sẽ là 10

// Bây h ta sẽ thử implement xem hàm này hoạt động thế nào nha
function reduce(arr, callback, initValue) {
    if(initValue === undefined) {
      initValue = arr[0];
      arr = arr.slice(1);
    }
    for(const item of arr) {
       initValue = callback(initValue, item);
    }
return initValue;
}

// và kết quả khi chạy vẫn là 10 :))
reduce([1, 2, 3, 4], (sum, num) => {
     return sum + num;
}, 0)

Liên hệ đến reducer trong redux
Chúng ta hãy tưởng tượng rằng initValue chính là state của application và mỗi phần tử trong mảng là một action. Mỗi khi có một hành động được dispatch thì sẽ làm thay đổi stateApp và state cũ được dùng làm đầu vào của lần dispatch tiếp theo.
Ví dụ dưới đây là một chiếc điều khiển quạt gió :

const actions = [
    {type: 'CHANGE_SPEED', payload: 3}, // khi được dispatch thì speed = 3, lastSpeed = 1
    {type: 'TURN_OFF'}, // khi được dispatch thì speed = 0, lastSpeed = 3
    {type: 'TURN_ON'} // khi được dispatch thì speed = 3, lastSpeed = 3
]

const initState = {
    speed: 0,
    lastSpeed: 1
}

// sử dụng lại hàm reduce đã được viết ở trên
reduce(actions,  (state, action) => {
    switch (action.type) {
        case 'CHANGE_SPEED':
           return {
               ...state,
               speed: action.payload
           };
        case 'TURN_ON:
           return {
               ...state,
               speed: state.lastSpeed
           };
        case 'TURN_OFF':
           return {
               ...state,
               speed: 0,
               lastSpeed: state.speed
           }
    }
}, initState);

==> và kết quả chúng ta nhận được sẽ là speed = 3 và lastSpeed = 3

Kết luận
Bài viết đến đây là kết thúc, hi vọng qua những giải thích và ví dụ ở trên sẽ giúp chúng ta hiểu rõ hơn về khái niệm rất quan trọng trong redux đó là reducer
have fun coding ^-^

1 Like