Redux là gì? Giới thiệu về Redux cơ bản

Giới thiệu

Redux khá là phổ biến. Tuy nhiên không phải tất cả chúng ta đều biết nó là gì và cách sử dụng ra sao. Trong bài viết này, chúng ta cùng tìm hiểu về những lợi ích mà nó mang lại và cách hoạt động của nó.

Redux là gì ?

Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng. Được dựa trên nền tảng tư tưởng của ngôn ngữ Elm kiến trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React (ReactJs và React Native).

Tại sao nên sử dụng Redux?

Giả sử chúng ta có 1 ứng dụng các node như trong hình là tượng trưng cho một single page application

Giả sử có một hành động nào đó được kích hoạt ở node d3 và ta muốn thay đổi trạng thái (state) ở d4 và c3 thì luồng dữ liệu sẽ được truyền từ node d3 trở về node a rồi từ node a mới truyền được đến các node d4 và c3

Cập nhật trạng thái (state) cho node d4: d3-c2-b1-a-b2-c4-d4

Cập nhật trạng thái (state) cho node c3: d3-c2-b1-a-b2-c3

Với những bài toàn nhỏ thì chúng ta hoàn toàn có thể dùng ReactJs để cập nhật các trạng thái (state) một cách dễ dàng mà không cần dùng đến Redux. Nhưng nếu là một bài toàn lớn thì sao lúc này nếu chỉ sử dụng ReacJs để cập nhật các trạng thái (state) thì thật sự là một khó khăn rất là lớn. Từ những nhược điểm trên thì Redux ra đời nhằm khắc phục nhược điểm đó.

Từ hình vẽ ta thấy để giải quyết bài toán trên ta chỉ cần dispatch một action từ node d3 về store rồi d4 và c3 chỉ cần connect tới store cà cập nhật data thay đổi thế là bài toán được giải quyết một cách dễ dàng

Để cài đặt Redux cho ứng dụng của bạn thì bạn chạy lệnh sau:

npm install --save redux

Nguyên lý của Redux

Redux được xây dựng dựa trên 3 nguyên lý như sau:

• Trạng thái (state) của toàn bộ ứng dụng được lưu trong trong 1 store duy nhất là 1 Object mô hình tree
• Chỉ có 1 cách duy nhất để thay đổi trạng thái (state) đó là tạo ra một action (là 1 object mô tả những gì xảy ra)
• Để chỉ rõ trạng thái (state) tree được thay đổi bởi 1 action bạn phải viết pure reducers

Cách sử dụng Redux cơ bản

Nếu muốn sử dụng Redux, chúng ta cần nhớ 4 thành phần chính của Redux : Store, Views , Actions, và Reducers :

• Store: Là nơi quản lý trạng thái (state), có thể truy cập để lấy trạng thái (state) ra, update state hiện có, và listener để nhận biết xem có thay đổi gì không, và cập nhật qua views.

import { createStore } from 'redux';
    const store = createStore(myReducer);
    console.log('Store:', store);

Có 3 phương thức quan trọng cần chú ý :

getState(): Giúp lấy ra state hiện tại

dispatch(action): Thực hiện gọi 1 action

subscrible(listener): Luôn lắng nghe xem có thay đổi gì ko rồi ngay lập tức cập nhật ra View

• Actions : nó là 1 pure object định nghĩa 2 thuộc tính lần lượt là type: kiểu của action, ví dụ như ‘TOGGLE_STATUS’, payload: giá trị tham số mà action creator truyền lên.

var action = { 
    type : 'TOGGLE_STATUS',
    payload : // tham số
};

• Reducers: Khác với actions có chức năng là mô tả những thứ gì đã xảy ra, nó không chỉ rõ state nào của response thay đổi, mà việc này là do reducers đảm nhiệm, nó là nơi xác định state sẽ thay đổi như thế nào, sau đó trả ra một state mới.

var myReducer = (state = initialState, action) => {
    if (action.type === 'TOGGLE_STATUS') {
        let newState = {...state}
        newState.status = !state.status;
        return newState; // tra ra 1 state moi
    }
    return state;
}

• View: Hiển thị dữ liệu được cung cấp bởi Store

import { createStore } from 'redux';

//khoi tao state ban dau
var initialState = {
    status : false
}

var myReducer = (state = initialState, action) => {
    if (action.type === 'TOGGLE_STATUS') {
        let newState = {...state}
        newState.status = !state.status;
        return newState;// muc dich cua reducer la tra ra cai state moi
    }
    
    return state;
}

const store = createStore(myReducer); // Khởi tạo store

console.log('Default:', store.getState());

// Thuc hien cong viec thay doi status
var action = { type : 'TOGGLE_STATUS'};

store.dispatch(action); // luc nay action o tren myReDucer chinh la action nay

console.log('TOGGLE_STATUS', store.getState())

Trên đây là nguyên lý hoặt động cơ bản của Redux.

action -> reducer -> store -> view

Kết luận

Trên đây là một số kiến thức cơ bản mà mình đã tìm hiểu được về Redux.  Cảm ơn mọi người đã theo dõi bài viết của mình.