Redux - First Project (3h)
- Eden Duong
Bài sau sẽ đi vào thực hành để hiểu rõ hơn luồng hoạt động của redux. Ở đây sẽ cung cấp source code, nhiệm vụ là hiểu và có thể làm được task tương tự ở các bài sau sẽ cần vận dụng.
Tài liệu¶
Cài đặt source code.
Source code trên đơn giản chỉ làm nhiệm vụ đếm số sau mỗi lần click sử dụng redux.
Ở đây, ta xác định action được tạo ra là action add, do đó, ta cần khai báo action
import * as types from '../constants/ActionTypes';
export function add() {
return {
type: types.ADD
};
}
Tiếp theo, ta cần tạo một reducer, để thực hiện nhiệm vụ chuyển đổi state sau khi nhận được action add phát ra
Ta sẽ có countReducer, có nhiệm vụ biến đổi state sau khi nhận được action add:
import {ADD} from '../constants/ActionTypes';
// initialState
const initialState = {
'count': 0
}
export default function countReducer(state = initialState, action) {
switch (action.type) {
case ADD:
return {
...state,
'count' : state.count + 1
}
default:
return state;
}
}
Combine reducer vào root reducer, muc đích để có thể apply được nhiều reducer sau này khi phát triển thêm.
import { combineReducers } from 'redux';
import countReducer from './countReducer';
const rootReducer = combineReducers({
countReducer
});
export default rootReducer;
Khởi tạo store, truyền 2 tham số là state khởi tạo và rootReducer, gồm các reducer được combine, ở đây ta chỉ có 1 reducer là countReducer
Trong component, map state của redux với props, map dispatch của redux với action props:
Chú ý mapStateToProps và mapDispatchToProps
map state với props, map state count trong store ứng với props count của count component
map dispatch với props, để khi gọi this.props.actions.add ta sẽ kích hoạt action add của redux.
Khi onclick, sẽ kích hoạt this.props.add => qua mapDispatchToProps, sẽ dispatch action add.
Action add được đưa vào reducer, xử lý tăng state lên 1 đơn vị
State cập nhật qua mapStateToProps, sẽ trả vào CountExample component, cập nhật props và hiển thị ra màn hình