Redux - Thư viện JavaScript

Redux là gì?

• Redux là một vùng chứa trạng thái có thể dự đoán được được thiết kế để giúp bạn viết các ứng dụng JavaScript hoạt động nhất quán trên các môi trường máy khách, máy chủ và môi trường gốc và dễ kiểm tra.
• Redux được tạo ra bởi Dan Abramov vào khoảng tháng 6 năm 2015. Nó được lấy cảm hứng từ Flux của Facebook và ngôn ngữ lập trình chức năng Elm. Redux trở nên phổ biến rất nhanh vì tính đơn giản , dung lượng nhỏ (chỉ 2 KB) và tài liệu tuyệt vời .

Khả năng dự đoán của Redux được xác định bởi ba nguyên tắc quan trọng nhất như được đưa ra dưới đây:

1. Nguồn chân lý duy nhất - Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong một cây đối tượng trong một cửa hàng duy nhất . Vì toàn bộ trạng thái ứng dụng được lưu trữ trong một cây duy nhất nên việc gỡ lỗi trở nên dễ dàng và phát triển nhanh hơn.
2. Trạng thái là Chỉ đọc - Cách duy nhất để thay đổi trạng thái là phát ra một hành động , một đối tượng mô tả những gì đã xảy ra. Điều này có nghĩa là không ai có thể trực tiếp thay đổi trạng thái ứng dụng của bạn.
3. Các thay đổi được thực hiện với các hàm thuần túy - Để chỉ định cách cây trạng thái được chuyển đổi bằng các hành động, bạn viết các hàm giảm thuần túy . Bộ giảm tốc là nơi trung tâm diễn ra việc sửa đổi trạng thái. Bộ giảm tốc là một chức năng có trạng thái hiện tại và hành động để thực hiện. Hàm phải trả về trạng thái mới được cập nhật, không phải là phiên bản sửa đổi của trạng thái hiện có .

Redux có ba phần xây dựng: hành động , lưu trữ và trình giảm bớt .

Các hành động trong Redux

Tóm lại, hành động là sự kiện . Chúng là cách duy nhất bạn có thể gửi dữ liệu từ ứng dụng của mình đến cửa hàng Redux của bạn. Dữ liệu có thể là từ các tương tác của người dùng, các sự kiện nội bộ như lệnh gọi API hoặc thậm chí gửi biểu mẫu.

• Các hành động là các đối tượng JavaScript thuần túy và chúng phải có thuộc tính kiểu (thường là không đổi) để chỉ ra loại hành động sẽ được thực hiện. Họ cũng phải có một trọng tải chứa thông tin cần được thực hiện bởi hành động.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• Nó là nơi duy nhất mà bạn có thể viết logic và tính toán. Hàm Reducer sẽ chấp nhận trạng thái trước đó của ứng dụng và hành động được gửi đi, tính toán trạng thái tiếp theo và trả về đối tượng mới.
• Một số điều sau đây sẽ không bao giờ được thực hiện bên trong trình rút gọn −Mutation của các đối số hàm, lệnh gọi API & logic định tuyến và Gọi hàm không thuần túy, ví dụ Math.random ()
• Nó dựa trên reducehàm trong JavaScript, trong đó một giá trị được tính toán từ nhiều giá trị sau khi một hàm gọi lại đã được thực hiện.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Đối với các ứng dụng phức tạp hơn, bạn có thể sử dụng combineReducers()tiện ích do Redux cung cấp (thực sự được khuyến nghị). Nó kết hợp tất cả các bộ giảm trong ứng dụng thành một bộ giảm chỉ mục duy nhất. Mỗi trình giảm tốc chịu trách nhiệm về một phần trạng thái của ứng dụng và thông số trạng thái khác nhau đối với mọi trình giảm tốc. Các combineReducers()tiện ích làm cho cấu trúc tập tin dễ dàng hơn để duy trì.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Cho phép truy cập vào trạng thái thông qua getState();
• Cho phép trạng thái được cập nhật qua dispatch(action);
• Đăng ký thính giả qua subscribe(listener);
• Xử lý việc hủy đăng ký người nghe thông qua chức năng được trả về subscribe(listener).
• createStore - hàm có thể có ba đối số. Bộ giảm là một hàm trả về trạng thái tiếp theo của ứng dụng. PreloadedState là một đối số tùy chọn và là trạng thái ban đầu của ứng dụng của bạn. Một chất tăng cường cũng là một đối số tùy chọn. Nó sẽ giúp bạn nâng cao cửa hàng với khả năng của bên thứ ba.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux chính nó là đồng bộ, vậy làm thế nào các async hoạt động như yêu cầu mạng làm việc với Redux? Ở đây phần mềm trung gian có ích.

• Như đã thảo luận trước đó, bộ giảm là nơi ghi tất cả logic thực thi. Công cụ giảm thiểu không liên quan đến việc ai thực hiện nó, mất bao nhiêu thời gian hoặc ghi lại trạng thái của ứng dụng trước và sau khi hành động được thực hiện. Trong trường hợp này, chức năng phần mềm trung gian của Redux cung cấp một phương tiện để tương tác với hành động được gửi đi trước khi chúng tiếp cận trình giảm thiểu.
• Thông thường, phần mềm trung gian được sử dụng để xử lý các hành động không đồng bộ trong ứng dụng của bạn. Redux cung cấp API được gọi là applyMiddleware cho phép chúng ta sử dụng phần mềm trung gian tùy chỉnh cũng như các phần mềm trung gian Redux như redux-thunk và redux-saga . Và điều này có thể được áp dụng để lưu trữ như sau:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Khả năng dự đoán của kết quả - Luôn có một nguồn chân lý, cửa hàng, không có sự nhầm lẫn nào về cách đồng bộ trạng thái hiện tại với các hành động và các phần khác của ứng dụng.
• Khả năng bảo trì - Có kết quả có thể đoán trước và cấu trúc chặt chẽ giúp mã dễ bảo trì hơn. Điều này cũng giúp bạn tách biệt logic nghiệp vụ của mình khỏi cây thành phần. Đối với các ứng dụng quy mô lớn, điều quan trọng là phải giữ cho ứng dụng của bạn dễ dự đoán và dễ bảo trì hơn.
• Tổ chức - Redux nghiêm ngặt hơn về cách tổ chức mã, điều này làm cho mã nhất quán hơn và nhóm làm việc dễ dàng hơn.
• Kết xuất máy chủ - Điều này rất hữu ích, đặc biệt đối với kết xuất ban đầu, giúp mang lại trải nghiệm người dùng tốt hơn hoặc tối ưu hóa công cụ tìm kiếm. Chỉ cần chuyển cửa hàng được tạo trên máy chủ sang phía máy khách.
• Công cụ dành cho nhà phát triển - Nhà phát triển có thể theo dõi mọi thứ đang diễn ra trong ứng dụng theo thời gian thực, từ các hành động đến các thay đổi trạng thái. Nó cho phép bạn chỉnh sửa mã trực tiếp kết hợp với trình gỡ lỗi du hành thời gian.
• Cộng đồng và hệ sinh thái - Đây là một điểm cộng lớn bất cứ khi nào bạn đang học hoặc sử dụng bất kỳ thư viện hoặc khuôn khổ nào. Có một cộng đồng đằng sau Redux khiến nó trở nên hấp dẫn hơn khi sử dụng.
• Dễ kiểm tra - Quy tắc đầu tiên của việc viết mã có thể kiểm tra là viết các hàm nhỏ chỉ làm một việc và độc lập. Mã của Redux chủ yếu là các chức năng: nhỏ, thuần túy và biệt lập.
• Lợi ích về hiệu suất - Bạn có thể cho rằng việc giữ nguyên trạng thái toàn cầu của ứng dụng sẽ dẫn đến một số suy giảm hiệu suất. Ở một mức độ lớn, đó không phải là trường hợp. React Redux thực hiện nhiều tối ưu hóa hiệu suất bên trong để thành phần được kết nối của riêng bạn chỉ hiển thị khi nó thực sự cần.

• Bước hữu ích cuối cùng để làm việc với Redux là cài đặt và khởi chạy các công cụ phát triển của riêng Redux. Nếu đang sử dụng Chrome, bạn có thể bật Redux DevTools bằng cách nhấp vào liên kết bên dưới:
• Nhưng còn một bước nữa để làm cho nó hoạt động. Trong chúng ta createStorephương pháp, chúng ta cần phải vượt qua những điều sau đây như một cuộc tranh cãi sau khi giảm tốc của chúng tôi: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Với sự bổ sung đó, store.jssẽ trông như thế này:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;