- vừa được xem lúc

Sử dụng useReducer hook trong React

0 0 67

Người đăng: Hoang Bin

Theo Viblo Asia

Bắt đầu từ useState

Nói về React Hook, đã có nhiều bài viết về useState, nó cho phép chúng ta sử dụng state và các chức năng khác của React (life cycle, side effect,...) mà không cần viết class component.

import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Ở trên là 1 ví dụ đơn giản; useState hook khởi tạo initialState là tham số truyền vào, trả về cặp state value count, và 1 hàm dùng để update state đó setCount, vì useState hook này cũng dễ hiểu nên mình chỉ nói ngắn gọn ngang đây thôi nhé.

Từ useState đến useReducer

Vậy nếu trong trường hợp logic state của component trở nên lớn và phức tạp hợp thì khi đó dùng ta sẽ dùng một hàm hook là useReducer sẽ giúp chúng ta dễ quản lý và tổ chức state tốt hơn.

Vậy useReducer là gì, thực chất là là một phiên bản nâng cao của useState, dùng trong trường hợp local state của component phức tạp, có nhiều action làm thay đổi state đó. Thay vì các bạn dùng nhiều useState hoặc useState với value là nested object/array và viết nhiều function để thay đổi state thì bây giờ các bạn có thể tổ chức state và các action làm thay đổi state đó 1 cách logic nhờ useReducer

Reducer là gì

Để sử dụng useReducer hook; đầu tiên chúng ta cần biết reducer là gì, đơn giản là một hàm có 2 tham số là state, action và trả về new state sau khi thực hiện một action, hãy tưởng tượng reducer như là một bộ chuyển đổi, nhận input, thực hiện action tác động đến input đó, rồi tạo ra output.

(state, action) => newState

Chúng ta cùng xem qua một reducer cụ thể nhé:

const todoReducer = (state, action) => { switch (action.type) { case 'DO_TODO': return state.map(todo => { if (todo.id === action.id) { return { ...todo, complete: true }; } else { return todo; } }); case 'UNDO_TODO': return state.map(todo => { if (todo.id === action.id) { return { ...todo, complete: false }; } else { return todo; } }); default: return state; }
};

Ở trên là một Todo reducer; state ban đầu là list items todo, có 2 kiểu action type để chuyển đổi 2 trạng thái tương ứng của item là complete: true or false.

Và sử sụng todoReducer đó như sau:

const initialTodos = [ { id: 'a', task: 'Learn React', complete: false, }, { id: 'b', task: 'Learn Firebase', complete: false, },
]; const action = { type: 'DO_TODO', id: 'a',
}; const newTodos = todoReducer(initialTodos, action); console.log(newTodos);
// [
// {
// id: 'a',
// task: 'Learn React',
// complete: true,
// },
// {
// id: 'b',
// task: 'Learn Firebase',
// complete: false,
// },
// ]

Đó là 1 ví dụ đơn giản về reducer, cũng dễ hiểu đúng không nào, và bây giờ chúng ta cùng tìm hiểu useReducer hook trong React nhé

useReducer hook

Như đã nói ở trên useReducer hook được sử dụng trong trường hợp component có state phức tạp và có nhiều action type làm thay đổi state đó.

useReducer function nhận vào reducerinitialState khởi tạo ban đầu, trả về state hiện tại và dispatch function dùng để trigger 1 action

Ok, chúng ta sẽ viết một TodoApp có thể render ra list item và toggle item đó đã hoàn thành hay chưa nhé, mình sẽ sử dụng lại todoReducerinitialTodos như trên nhé

import React from 'react'; const initialTodos = [...]; // same as above
const todoReducer = (state, action) => newState; //same as above const App = () => { const [todos, dispatch] = React.useReducer( todoReducer, initialTodos ); const handleChange = todo => { dispatch({ type: todo.complete ? 'UNDO_TODO' : 'DO_TODO', id: todo.id, }); }; return ( <ul> {todos.map(todo => ( <li key={todo.id}> <label> <input type="checkbox" checked={todo.complete} onChange={() => handleChange(todo)} /> {todo.task} </label> </li> ))} </ul> );
}; export default App;

Ở ví dụ trên:

  • React.useReducer: dòng này sử dụng useReducer với 2 tham số todoReducerinitialTodos, trả về todos hiện tại và dispatch dùng để send action đến reducer làm thay đổi list todos
  • handleChange: hàm này dùng để dispatch action chuyển đổi trạng thái của item là hoàn thành or chưa hoàn thành
  • Tiếp theo chúng ta sẽ render ra list item todos đi kèm với 1 checkbox để switch trạng thái complete của item đó, mỗi lần check or uncheck thì sẽ call handleChange
  • Mỗi lần switch trạng thái hoàn thành như vậy sẽ update todos và component sẽ đươcj render lại với list todos vừa được update

Kết Luận

React useReducer hook là một cách hữu ích để quản lý state trong React bên cạnh useState, và nó có thể kết hợp với context dùng để quản lý state trong một ứng dụng mà có thể không cần sử dụng đến redux

Cảm ơn các bạn đã dành thời gian đọc, hãy chờ bài biết tiếp theo của mình nhé ?

Refs: https://reactjs.org/docs/hooks-reference.html#usereducer https://www.robinwieruch.de/react-usereducer-hook/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 690

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413