ích hợp Redux vào ReactJS - ự học ReactJS căn bản đến nâng ca

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 !