×

Cài đặt thư viện Redux trong JavaScript

Avatar of admin
admin 0 Views

Redux là một thư viện quản lý trạng thái rất phổ biến trong các dự án JavaScript, đặc biệt là khi làm việc với React. Việc quản lý trạng thái toàn cục trở nên dễ dàng và mạch lạc hơn nhờ khả năng quản lý các trạng thái thông qua một store duy nhất. Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt và sử dụng Redux trong một dự án JavaScript từ đầu đến cuối.

1. Giới Thiệu về Redux

Redux là gì?

Redux là một thư viện JavaScript dùng để quản lý trạng thái của ứng dụng. Nó thường được sử dụng cùng với các thư viện UI như React nhưng thực tế có thể sử dụng với bất kỳ framework hoặc thư viện nào. Redux giúp duy trì một state toàn cục (toàn bộ trạng thái của ứng dụng) và quản lý việc thay đổi trạng thái một cách rõ ràng và dễ kiểm soát hơn.

Tại sao nên sử dụng Redux?

  • Quản lý trạng thái một cách dễ dàng: Cho phép quản lý toàn bộ trạng thái của ứng dụng qua một nơi duy nhất gọi là "store".
  • Dễ dàng duy trì và debug: Thay đổi trạng thái qua các hành động (actions) làm cho code dễ hiểu và dễ bảo trì.
  • Cộng đồng mạnh và nhiều tài nguyên: Có một cộng đồng lớn và nhiều tài liệu hỗ trợ, plugin và middleware phong phú.

2. Cài Đặt Redux

Yêu Cầu Tiền Đề

Trước khi bắt đầu, bạn cần có Node.js và npm (Node Package Manager) cài đặt sẵn trên máy. Nếu chưa có, bạn có thể tải và cài đặt từ trang chủ Node.js.

Tạo Project Mới

Đầu tiên, chúng ta sẽ tạo một dự án mới để sử dụng Redux. Bạn có thể dùng bất kỳ trình biên tập mã nguồn nào bạn thích, chẳng hạn như VSCode.

mkdir redux-demo
cd redux-demo
npm init -y

Cài Đặt Redux và React-Redux

Sau khi đã tạo project, chúng ta cần cài đặt thư viện Redux và React-Redux (nếu bạn đang sử dụng React):

npm install redux
npm install react-redux

3. Cấu Trúc Project

Một project sử dụng Redux thường có cấu trúc như sau:

src/
|-- components/
|-- actions/
|-- reducers/
|-- store/
|-- App.js
|-- index.js

src/components/

Thư mục chứa các component React.

src/actions/

Thư mục chứa các action creators - các hàm tạo ra các action object.

src/reducers/

Thư mục chứa các reducer - các hàm xử lý trạng thái dựa trên action.

src/store/

Thư mục chứa file khởi tạo store.

4. Khởi Tạo Store với Redux

Đầu tiên, chúng ta cần khởi tạo một store Redux. Trong thư mục store, tạo file index.js:

import { createStore } from 'redux';
import rootReducer from '../reducers';

const store = createStore(rootReducer);

export default store;

Kết Nối Store với Ứng dụng React

Trong file index.js của dự án, chúng ta sẽ sử dụng Provider từ react-redux để kết nối store với ứng dụng React:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

5. Tạo Các Reducer

Reducers là các hàm xử lý trạng thái và trả về trạng thái mới cho store dựa trên action được gửi tới. Tạo thư mục và file src/reducers/index.js:

import { combineReducers } from 'redux';
// Các reducer khác sẽ được import vào đây
import exampleReducer from './exampleReducer';

const rootReducer = combineReducers({
  example: exampleReducer,
  // Các reducer khác
});

export default rootReducer;

Trong src/reducers, tạo file exampleReducer.js:

const initialState = {
  count: 0
};

const exampleReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

export default exampleReducer;

6. Tạo Các Action

Action là những object chứa thông tin về việc cần thực hiện thay đổi state. Tạo thư mục src/actions/ và file exampleActions.js:

export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

7. Sử Dụng Redux trong Component React

Cuối cùng, chúng ta sẽ sử dụng Redux trong các component React để dispatch actions và truy cập state. Trong src/components/, tạo file Counter.js:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../actions/exampleActions';

const Counter = () => {
  const count = useSelector(state => state.example.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

Trong App.js, sử dụng component Counter:

import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

8. Kết Luận

Việc cài đặt Redux trong một dự án JavaScript mang lại nhiều lợi ích trong việc quản lý trạng thái của ứng dụng, đặc biệt khi ứng dụng trở nên phức tạp. Bài viết này đã hướng dẫn chi tiết cách cài đặt và cấu hình Redux từ đầu đến cuối. Hy vọng bạn có thể dễ dàng áp dụng vào các dự án của mình.

Comments

Bài viết liên quan