Tích hợp Redux vào ReactJS
Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích hợp Redux vào trong một dự án ReactJS.
![banquyen png](https://freetuts.net/public/banquyen.png)
Redux là một thư viện hỗ trợ chúng ta quản lí các state trong các ứng dụng javascript. Có thể khẳng định đây là một thư viện khá quan trọng nhưng đối với những người mới làm quen với Redux việc tích hợp nó vào dự án React không đơn giản.
Nội dung bài viết sẽ chỉ ra từng bước để tích hợp Redux vào ReactJS một cách chi tiết nhất.
Chúng ta nên tham khảo thêm bài viết về Redux là gì? Tại sao lại ứng dụng trong ReactJS để có thể hiểu rõ các khái niệm được giới thiệu ở trong bài viết này.
Bài viết này được đăng tại [free tuts .net]
1. Cài đặt Redux
Sau khi khởi tạo môt dự án ReactJS, để có thể sử dụng Redux chúng ta cần phải cài đặt 2 module là redux
và react-redux
bằng cách sử dụng npm:
npm install redux react-redux --save
Sau khi cài đặt thành công chúng ta có thể bắt đầu sử dụng redux trong dự án của mình rồi !
2. Tích hợp Redux vào ReactJS
Để hiểu rõ hơn về các bước tích hợp Redux chúng ta sẽ đi xây dựng bộ khung Redux cho một ứng dụng ghi chú.
Ở đây chúng ta sẽ chia nhỏ các phần của Redux ra nhiều thư mục. Bạn có thể tìm hiểu về các thành phân quan trọng của redux ở bài viết giới thiệu về Redux ở trên. Chúng ta sẽ làm việc trong thư mục src
.
src/ ....const/ index.js .....actions/ index.js ....reducers/ ... index.js ----components ....App.js
Mỗi thư mục sẽ có các nhiệm vụ khác nhau :
const
: chứa các hằng số cố định của dự án.actions
: chứa các actions dùng để truyền vào hàm dispatch.reducers
: chứa các reducers trong redux.
Trước khi xây dựng ứng dụng dùng Redux chúng ta cần phải hiểu rõ các thành phần có trong ứng dụng, từ đó xây dựng mô hình triển khai Redux một cách khoa học hơn.
Khởi tạo các hằng
Chúng ta sẽ đi khởi tạo các hằng số hỗ trợ việc triển khai dự án. Trong file const/index.js
chúng ta sẽ khởi tạo 1 hằng số hỗ trợ việc thêm ghi chú.
// const/index.js export const ADD_NEW_NOTE = "ADD_NEW_NOTE";
Trong các dự án lớn sẽ có rất hiều hằng số, bởi vậy việc khởi tạo ra một thư mục chứa các hằng số là điều hoàn toàn cần thiết.
Khởi tạo actions
Actions là một object chứa các hành động mà bạn muốn gửi đến reducers. Giả sử như chúng ta muốn thêm note thì chúng ta sẽ chỉ định nó bên trong actions. Khi muốn gửi actions đến reducers chỉ cần gọi store.dispatch(actions)
. Ở đây chúng ta sẽ chỉ định các actions hỗ trợ việc thêm ghi chú như sau:
// actions/index.js import { ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE } from "../const/index"; export const actAddNote = (content) => { return { type: ADD_NEW_NOTE, content, }; };
Mỗi action chúng ta cần phải chỉ định thụôc tính type có giá trị duy nhất. Bởi khi action gửi đến reducer nó sẽ dựa vafp thuộc tính action.type để xác định mình nên làm gì với state.
Khởi tạo reducers
Reducers sẽ có nhiệm vụ thay đổi state của ứng dụng dựa trên từng hành động được gửi đế. Trong các dự án lớn chúng ta cần chia ra rất nhiều reducers khác nhau. Ở trong thư mục src/reducers
sẽ chỉ khởi tạo 1 reducers có tên noteReducer
.
// reducers/noteReducers.js import { ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE } from "../const/index"; const noteReducers = (state = [], action) => { switch (action.type) { case ADD_NEW_NOTE: const generateID = new Date().getTime(); state = [...state, { id: generateID, content: action.content }]; return state; default: return state; } }; export default noteReducers
Chúng ta sẽ gộp các reducer lại với nhau bằng hàm combineReducer
.
// src/reducers/index.js import {combineReducers} from 'redux' import noteReducers from './noteReducer' //Ở đay chúng ta có thể gộp nhiều reducers // Ở ví dụ này mình chỉ có 1 reducers là noteReducers export default combineReducers({ note: noteReducers })
Tích hợp Redux
Sau khi đã tạo ra các thành phần cần thiết trong ứng dụng React chúng ta cần phải tạo Store lưu trữ state. Chúng ta sẽ làm việc với file src/index.js
// src/index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import { Provider } from "react-redux"; import { createStore } from "redux"; //Gọi reducers import reducers from "./reducers/index"; //Tạo store const store = createStore(reducers); ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById("root") ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
Để các component khác có thể lấy dữ liệu chúng ta cần phải bọc các component vào trong Provider
.
Lấy và cập nhật giá trị của state từ Store
Sau khi đã hoàn thành xong tất cả các bước cài đặt Redux cho project, chúng ta có thể thực hiên lấy và cập nhật giá trị của state ở store về component. Giả sử ở đây chúng ta muốn tương tác với store ở component App.js
sẽ thực hiện như sau:
// src/App.js //Import kết nối tới react-redux import { connect } from 'react-redux' //Import action dùng để dispatch import {actAddNote} from './actions/index' function App(props) { return ( ... ); } //Gán dispatch thành props const mapDispatchToProps = (dispatch) => { return { addNote: (content) => { dispatch(actAddNote(content)) } } } //Gán giá trị của state thành props const mapStateToProps = (state, ownProps) => { return { note: state.note } } //Export component với két nối redux. export default connect(mapStateToProps, mapDispatchToProps)(App)
Để kết nối với redux ở trong component chúng ta cần phải import hàm kết nối. Ở đây có 2 hàm cực kì quan trọng giúp thao tác với state đó là:
mapStateToProps
: giúp chuyển state sang thành props sử dụng trong component.mapDispatchToProps
: giúp chuyển dispatch trong redux thành props. Giả sử mình muốn thực hiện dispatch actionactAddNote
thì mình chỉ cần gọiprops.addNote()
Đến đây chúng ta đã tích hợp thành công Redux vào ReactJS, trong loạt bài viết tiếp theo chúng ta sẽ đi xây dựng các ví dụ cụ thể và trực quan hơn nữa. Trên đây chúng ta đã cùng nhau đi tìm hiểu về sử dụng Redux trong ReactJS. Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn !