Ví dụ tích hợp Redux trong ReactJS

Ví dụ tích hợp Redux trong ReactJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tích hợp Redux trong ReactJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và ReactJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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.

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.

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 action actAddNote thì mình chỉ cần gọi props.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 !

Bài sau Bài tiếp

Hy vọng với bài viết về Ví dụ tích hợp Redux trong ReactJS đã giải đáp giúp bạn phần nào về kiến thức lập trình ReactJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!