Xin chào các bạn, dạo này bận quá, giờ mới có thời gian viết blog tiếp. Nối tiếp bài viết về Redux lần trước, trong bài viết này mình sẽ hướng dẫn cách tích hợp Redux vào một ứng dụng React.
Nội dung bài viết hôm nay gồm các mục sau:

Giới thiệu chung và khởi tạo project
Tích hợp Redux bằng connect, mapStateToProps và mapsDispatchToProps
Tích hợp Redux bằng cách sử dụng Hooks

Chúng ta bắt đầu thôi.

1. Giới thiệu chung và khởi tạo project

Để ví dụ cho project lần này mình sẽ viết 1 app Counter bằng react, sau đó sẽ tích hợp redux vào.
Chúng ta tiến hành khởi tạo project như sau:

Trong terminal, chạy lệnh sau để khởi tạo 1 React app

npm init react-app react-redux-demo

Sau đó di chuyển vào thư mục react-redux-demo vừa tạo.
Chạy lệnh npm start và mở http://localhost:3000 ta sẽ thấy giao diện mặc định của React app như sau
Tiếp theo chúng ta sẽ tạo 1 component Counter trong src/components/Counter.js như sau:

import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const decrease = () => setCount(count - 1) const increase = () => setCount(count + 1) return ( <div className="counter"> <h1 className="counter-title">Counter</h1> <div> <button className="counter-button" onClick={decrease}>-</button> <span className="counter-value">{count}</span> <button className="counter-button" onClick={increase}>+</button> </div> </div> ) } export default Counter;

Tiếp theo trong src/App.css ta style lại cho counter như sau:

# Add these lines in App.css .counter { margin: 10px auto; width: 50%; border-radius: 5px; border: 1px solid black; padding: 5px; } .counter-button { width: 30px; height: 30px; border-radius: 5px; outline: none; margin: 5px; font-size: 14px; }

Cuối cùng ta import counter component vào App.js

import React from 'react'; import { Counter } from './components/Counter' import './App.css'; function App() { return ( <div className="App"> <Counter /> </div> ); } export default App;

Kiểm tra lại trình duyệt ta được kết quả như sau:

Như vậy chúng ta đã hoàn thành khởi tạo 1 project thuần react. Link source code mình sẽ để ở đây cho mọi người tham khảo.

2. Tích hợp Redux bằng connect, mapStateToProps và mapsDispatchToProps

Tiếp theo chúng ta sẽ tiến hành tích hợp redux vào Counter ở trên.
Như ta thấy, state của ứng dụng chính là giá trị count và các action là INCREASE để tăng giá trị count lên 1 và DECREASE để giảm giá trị count xuống 1.

Đầu tiên chúng ta sẽ tiến hành cài các package cần thiết là redux và react-redux

npm install redux react-redux

Chúng ta tạo actions như sau: trong src/redux, tạo file action.js như sau:

export increase = () => ({type: 'INCREASE'}) export decrease = () => ({type: 'DECREASE'})

Tiếp theo tạo file src/redux/reducer.js như sau:

Tạo file src/redux/store.js

import { createStore} from 'redux'; import reducer from './reducer' export default createStore(reducer);

Tiếp theo, chúng ta sẽ wrap toàn bộ ứng dụng của của mình bằng Provider. Sửa src/index.js như sau:

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './redux/store' import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root')); serviceWorker.unregister();

Tiếp theo chúng ta sẽ gán các action và state của redux vào counter component

import React from 'react'; import { increase, decrease } from '../redux/actions' import { connect } from 'react-redux'; const Counter = ({ count, increase, decrease }) => { return ( <div className="counter"> <h1 className="counter-title">Counter</h1> <div> <button className="counter-button" onClick={decrease}>-</button> <span className="counter-value">{count}</span> <button className="counter-button" onClick={increase}>+</button> </div> </div> ) } const mapStateToProps = state => ({ count: state.count }); const mapDispatchToProps = dispatch => ({ increase: () => dispatch(increase()), decrease: () => dispatch(decrease()), }) export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Ta gắn biến count và 2 action increase, decrease vào Counter lần lượt thông qua hàm connect của redux, từ đó khi thực hiện bấm nút (+) hoặc (-) thì ta sẽ thay đổi được giá trị biến count.

Mở trình duyệt và kiểm tra, ta thấy Counter hoạt động một cách bình thường.

Như vậy chúng ta đã hoàn thành việc tích hợp redux vào 1 ứng dụng react theo cách truyền thống sử dụng connect, mapStateToProps và mapsDispatchToProps.
Source code mình sẽ để ở đây.
Phần tiếp theo chúng ta sẽ dùng một cách mới hơn để tích hợp redux vào react app. Đó là thông qua Hooks.

3. Tích hợp Redux bằng cách sử dụng Hooks

Như các bạn thấy ví dụ về Counter ở phần 1, mình có sử dụng Hooks của react để viết thay vì cách dùng Class component như trước đây. (Xem thêm về react hooks tại đây)
Chạy theo xu hướng này, react-redux cũng cung cấp các hook cho chúng ta để có thể sử dụng với redux thay vì phải dùng connect như xưa. Phần này chúng ta sẽ thử sử dụng nó nhé.
Trong src/components/Counter, chúng ta update code lại như sau:

import React  from 'react';
import { useSelector, useDispatch } from 'react-redux'

const Counter = () => {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()
  const increase = () => dispatch({ type: 'INCREASE'})
  const decrease = () => dispatch({ type: 'DECREASE'})
  return (
    <div className="counter">
      <h1 className="counter-title">Counter</h1>
      <div>
        <button className="counter-button" onClick={decrease}>-</button>
        <span className="counter-value">{count}</span>
        <button className="counter-button" onClick={increase}>+</button>
      </div>
    </div>
  )
}

export default (Counter);

Ta có thể thấy, bằng useSelector ta có thể gắn state của redux vào Counter mà không cần phải mapStateToProps nữa. Tương tự với useDispatch, ta có thể gọi các action trực tiếp từ component mà ko phải import từ 1 file action riêng hay phải dùng mapDispatchToProps nữa. Điều này khiến cho code của chúng ta ngắn gọn hơn rất nhiều.
Source code mình sẽ để ở đây cho các bạn tham khảo.

Kết

Qua bài viết trên, hi vọng các bạn đã nắm rõ được cách kết hợp react và redux vào project cụ thể của mình, và biết thêm cách sử dụng hook của react khi dùng với redux.
Nếu các bạn thấy bài viết có ích, hay chia sẻ cho mọi người cùng biết nhé! Nếu có ý kiến đóng góp, đừng ngần ngại để lại comment bên dưới để mình có thể cải thiện các bài viết về sau. Thanks