• Store là nơi lưu trữ state, state chính là data của app.
  • Muốn thay đổi data(state lưu trong store) của app, chỉ có cách là trigger reducer. Muốn trigger được reducer, chỉ có cách là dispatch một action nhất định nào đó.

Ví dụ: Muốn thay đổi userInfo trong store, khai báo một reducer tên là changeUserInfo.

  • Reducer là một hàm để thay đổi data của app.
  • Store được khởi tạo bằng cách store = createStore(yourReducer): lúc này thì store là một object gồm 3 hàm getState, dispatch và subcribe.
  • Nếu bạn dùng connect() mà không truyền vào mapDispatchToProps thì mặc định sẽ truyền dispatch vào props.
  • Khi gọi store.dispatch(action) thì hàm yourReducer sẽ được thực thi, nội dung thực thi của yourReducer là thay đổi state (data của app) dựa vào action.type, vì thế mà action luôn luôn phải có type.
  • Action chỉ là object thông thường (không có function trong đó), và phải có type. Action được định danh để cho reducer phụ thuộc vào nó và làm nhiệm vụ tương ứng.
  • Provider để tự động truyền store vào các component con nằm trong nó. Thông thường chúng ta phải dùng store trong tất cả các component trong app nên thường đặt App trong Provider.
  • Dùng connect() để lấy các state mong muốn trong store. Provider chỉ cung cấp store cho component có thể sử dụng, còn để sử dụng được thì phải connect component tới state trong store.

 


Chú ý thằng redux-thunk: dispatch bình thường sẽ dispatch một action nhưng redux-thunk này lại dispatch một function, function này luôn nhận vào 2 params của store là dispatch và state.

VD:

const createTest = () => (dispatch, getState) => {
  // other code…
  dispatch(action) // ở đây mới là dispatch của redux
}

dispatch(createTest())

Đoạn code trên tương đương với:

const createTest = function() {
  return function(dispatch, getState) {
    //other code…
    dispatch(action) // ở đây mới là dispatch của redux
  }
}

dispatch(createTest())

 

Nhìn vào ví dụ trên thì mục đích của thunk là không muốn thực hiện reducer ngay khi dispatch mà muốn tùy biến dispatch, ví dụ như muốn reducer chạy async hay chỉ muốn reducer chạy khi thỏa mãn điều kiện nào đó.