Redux

Hầu hết các lib như React, Angular, etc được built theo một cách sao cho các components đến việc quản lý nội bộ các state của chúng mà không cần bất kỳ một thư viện or tool nào từ bên ngoài.

Nó sẽ hoạt động tốt với các ứng dụng có ít components nhưng khi ứng dụng trở lên lớn hơn thì việc quản lý states được chia sẻ qua các components sẽ biến thành các công việc lặt nhặt.

Cơ bản là, state mà chúng ta đang nói đến phải được nhấc lên một component cha gần nhất và tiếp nữa cho đến khi nó đến được cái component tổ tiên chứa tất cả các components nó cần cái state này sau đó pass cái state này xuống @@. Điều này sẽ khiến state trở nên khó hơn trong việc maintain và less predictable.

Điều này khiến cho bộ phận quản lý state trong app trở lên bừa bộn cũng như app trở lên vô cùng phức tạp. Đó là lý do tại sao chúng ta cần một state management tool như Redux.

CÁI CÁCH MÀ REDUX HOẠT ĐỘNG LÀ KHÁ ĐƠN GIẢN. NÓ CÓ 1 STORE LƯU TRỮ TOÀN BỘ STATE CỦA APP. MỖI COMPONENT CÓ THỂ ACCESS TRỰC TIẾP ĐẾN STATE ĐƯỢC LƯU TRỮ THAY VÌ PHẢI SEND DROP DOWN PROPS TỪ COMPONENT NÀY ĐẾN COMPONENT KHÁC.

Có 3 thành phần của Redux: Actions, Store, Reducers.

1. Actions

Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến Redux store. Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission.

ACTIONSSTORE.DISPATCH()

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

2. Reducers

Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới. Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.

Đây là một ví dụ về cách mà Reducers hoạt động trong Redux:

     const LoginComponent = (state = initialState, action) => {
         switch (action.type) {
           case "LOGIN":
               return state.map(user => {
                   if (user.username !== action.username) {
                       return user;
                   }
     
                   if (user.password == action.password) {
                       return {
                           ...user,
                           login_status: "LOGGED IN"
                       }
                   }
               });
               
           default:
               return state;
           } 
     };

3. Store

Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods.

Tạo một store cho một login app:

const store = createStore(LoginComponent);

Các actions thực hiện trên một state luôn luôn trả về một state mới. Vì vậy, state này là đơn giản và dễ đoán.

Bây giờ, chúng ta đã biết hơn một chúng về Redux, hãy trở lại với ví dụ Login component và xem cách cách mà Redux có thể giúp chúng ta được gì.

    class App extends React.Component {
         render() {
             return (
                 <div>
                     <Status user={this.props.user.name}/>
                     <Login login={this.props.setLoginStatus}/>
                 </div>
             )
         }
     }