Giới thiệu về useSelector trong Redux
import { useSelector } from 'react-redux';
const myData = useSelector((state) => state.myData);
Trong đó, state là toàn bộ state của store Redux, và myData là một thuộc tính trong state mà chúng ta muốn lấy. Khi state của thuộc tính này thay đổi, useSelector sẽ tự động gọi lại component và cập nhật lại giá trị của myData.
useSelector giúp cho việc sử dụng Redux trong ứng dụng React trở nên linh hoạt hơn, cho phép bạn truy xuất các state từ store và sử dụng chúng trong các component một cách đơn giản và dễ dàng.
Ví dụ về useSelector trong
- Khai báo state và reducer trong store Redux:
import { createStore } from 'redux';
const initialState = {
todos: [],
filter: 'all'
};
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> todoReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
case 'SET_FILTER':
return {
...state,
filter: action.payload
};
default:
return state;
}
}
const store = createStore(todoReducer);
Ở đây, chúng ta khai báo state ban đầu của store bao gồm một mảng todos và một giá trị filter. Chúng ta cũng khai báo reducer để xử lý các hành động ADD_TODO và SET_FILTER.
- Sử dụng useSelector để lấy giá trị state trong component:
import React from 'react';
import { useSelector } from 'react-redux';
function TodoList() {
const todos = useSelector(state => state.todos);
const filter = useSelector(state => state.filter);
return (
<div>
<h2><span class="ez-toc-section" id="Todos"></span>Todos:<span class="ez-toc-section-end"></span></h2>
<ul>
{todos.map(<a href="https://nodemy.vn/tao-ung-dung-todo-voi-usestate-trong-react-hook/">todo</a> => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
<h2><span class="ez-toc-section" id="Filter"></span>Filter:<span class="ez-toc-section-end"></span></h2>
<div>{filter}</div>
</div>
);
}
export default TodoList;
Ở đây, chúng ta sử dụng useSelector hai lần để lấy giá trị todos và filter từ store Redux. Khi state thay đổi, giá trị của todos và filter sẽ được tự động cập nhật và component sẽ được render lại với các giá trị mới.
Kết luận và bài viết có liên quan
Bài viết có liên quan:
Đôi chút về useState trong React Hooks.
Cách sử dụng boostrap icon và font awesome icon vào trong React Js
Tìm hiểu về Redux Toolkit, một phiên bản mới của Redux trong React Js
DOM HTML trong Javascript, lấy nội dung trong thẻ html
Tìm hiểu về Redux Toolkit, một phiên bản mới của Redux trong React Js
