Review Dispatch trong React là gì Mới nhất

Mẹo Hướng dẫn Dispatch trong React là gì Mới Nhất

Bạn đang tìm kiếm từ khóa Dispatch trong React là gì được Update vào lúc : 2022-11-23 11:04:44 . Với phương châm chia sẻ Thủ Thuật Hướng dẫn trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Mình lý giải và hướng dẫn lại nha.

Redux (typescript) – Quản lý state trong React

Mặc dù trên mạng đã có thật nhiều bài về redux nhưng blog mình thì chưa

Nội dung chính

Redux (typescript) – Quản lý state trong ReactTại sao lại sở hữu ReduxRedux là gì?Cấu trúc của ReduxStore: Nơi tàng trữ và quản trị và vận hành state (Chính là Big Boss)Nguyên lý hoạt động và sinh hoạt giải trí của reduxHọc redux thông qua ví dụB1. Thiết lập reducerB2. Thiết lập những actionB3. Thiết lập storeB4. Viết component Person và dispatch action, lấy state từ storeNguồn tham khảoVideo liên quan

Tại sao lại sở hữu Redux

Do yêu cầu cho những ứng dụng single-page sử dụng Javascript ngày càng trở lên phức tạp thì code của toàn bộ chúng ta phải quản trị và vận hành nhiều state hơn. State hoàn toàn có thể gồm có là data trả về từ phía Server và được cached lại hay như thể tài liệu được tạo ra và thao tác ở phía client mà không được đưa lên phía server. UI state cũng ngày càng trở lên phức tạp.

Redux là gì?

Bản chất thao tác với React là việc truyền tài liệu Một trong những component và thay đổi state để rerender lại giao diện component. Nếu dự án công trình bất Động sản toàn bộ chúng ta lớn, việc truyền props từ Component cha sang nhiều component con khác sẽ rất khó để theo dõi code và bảo dưỡng code. Redux là thư viện phục vụ cho ta một store TT, tàng trữ toàn bộ những state, từ component muốn thay đổi state chỉ việc truy vấn tới store để thay đổi.

Cấu trúc của Redux

Redux gồm có 3 thành phần chính

Action

Là nơi mang những thông tin dùng để gửi từ ứng dụng đến Store. Các thông tin này là một trong object gồm type mô tả những gì đã xẩy ra và tài liệu được trình lên. Nói dễ hiểu, từ là 1 component, ta muốn thay đổi state trên store, ta phải gửi action , là một object để miêu tả muốn làm gì.

Reducer

Nơi tiếp nhận action và thay đổi state, làm re-render lại giao diện.Gồm 2 loại:

Root Reducer: là Boss, quản trị và vận hành toàn bộ reducer conChild Reducer: như đã biết về state, state là một object có nhiều thuộc tính, mỗi child reducer phụ trách thay đổi 1 thuộc tính trong state.

Store: Nơi tàng trữ và quản trị và vận hành state (Chính là Big Boss)

Các phương thức trong store

store.getState(): Lấy state được lưu trong storestore.dispatch(action): Gửi một action gồm một hành vi (type) và tài liệu (payload) lên reducer.store.subcribe()

Nguyên lý hoạt động và sinh hoạt giải trí của redux

Redux hoạt động và sinh hoạt giải trí là khá đơn thuần và giản dị. Nó có một store tàng trữ toàn bộ state của app. Mỗi component hoàn toàn có thể access trực tiếp đến state được tàng trữ thay vì phải send drop down props từ component này đến component khác.

Component gửi 1 sự kiện tới Action.Action tiếp nhận sự kiện và tài liệu đó và sẽ chuyển tới Reducer.Reducer sẽ tiếp nhận và xử lý action đóNếu state được lưu trong Reducer bị thay đổi. Store sẽ gửi state mới xuống lại Component, làm Component đó bị re-render lại.

Học redux thông qua ví dụ

Mình sẽ sẵn sàng sẵn sàng cho những bạn hai ví dụ

Một ví dụ viết về kiểu cách dùng redux trong class component và một ví dụ khác trong function component. Tuy nhiên, mình sẽ hướng dẫn những bạn cách viết function component, còn về class bạn hoàn toàn có thể xem link git mình phục vụ ở dưới

B1. Thiết lập reducer

Đầu tiên trong reducers/type.ts ta định nghĩa 2 action: xoá và thêm vào cho component person

/**
* Định nghĩa một enum là tên thường gọi của “`action“`
*
* Miêu tả hành vi mà “`action“` này đảm nhiệm
*/
export enum EReduxAddPeopleActionTypes
ADD_PERSON = “ADD_PERSON”,

/**
* Type định nghĩa cho “`action“`
*
* Thông thường “`action“` gồm hai phần là
*
* – “`type“` sẽ miêu tả “`action“` đấy sẽ làm gì
* – “`payload“` tài liệu mới được trình lên để thay đổi state
*/
export interface IReduxAddPeopleAction
type: EReduxAddPeopleActionTypes;
payload: string;

/**
* Định nghĩa một enum là tên thường gọi của “`action“`
*
* Miêu tả hành vi mà “`action“` này đảm nhiệm
*/
export enum EReduxRemovePeopleActionTypes
REMOVE_PERSON = “REMOVE_PERSON”,

/**
* Type định nghĩa cho “`action“`
*
* Thông thường “`action“` gồm hai phần là
*
* – “`type“` sẽ miêu tả “`action“` đấy sẽ làm gì
* – “`payload“` tài liệu mới được trình lên để thay đổi state
*/
export interface IReduxRemovePeopleAction
type: EReduxRemovePeopleActionTypes;
payload: number;

/**
* Root Action chứa hai action xoa và thêm
*/
export type TPersonActions = IReduxAddPeopleAction | IReduxRemovePeopleAction;

Kế đó tạo child reducer trong reducers/person.ts

import TPersonState, EReduxAddPeopleActionTypes, EReduxRemovePeopleActionTypes, TPersonActions from ‘./type’;
function neverReached(never: never)
console.log(never)
console.warn(‘this action cant be handle by person reducer ‘)

// action sẽ tiến hành dispatch bởi một Action Creator (như thể yếu tố kiện onClick của một button)
export function peopleReducer(state: TPersonState[] = [], action: TPersonActions)
switch (action.type)
case EReduxAddPeopleActionTypes.ADD_PERSON:
// state trong react sẽ là immutable nên cần trả lại một giá trị mới
return state.concat( id: state.length + 1, name: action.payload );
case EReduxRemovePeopleActionTypes.REMOVE_PERSON:
return state.filter(person => person.id !== action.payload);
default:
// bạn có thẻ return lại state
// Hoặc
neverReached(action);

return state;

Tạo Root Reducer trong reducers/index.ts

import combineReducers from ‘redux’
import peopleReducer from ‘./person’;
export const rootReducer = combineReducers(
peopleReducer,
// trong trường hợp có nhiều reducer thì bạn cho vào đây
)
export type TReducers = ReturnType

B2. Thiết lập những action

Tạo những action trong actions/person.ts

type sẽ mô tả cho toàn bộ chúng ta biết action đấy để làm gìpayload là thông tin tương hỗ update (đính kèm) được gửi kèm theo action

import EReduxAddPeopleActionTypes, EReduxRemovePeopleActionTypes, IReduxAddPeopleAction, IReduxRemovePeopleAction from ‘../reducers/person’;
/**
* Action thêm một people
* @param personName tên person nhập ô input
*/
export function addPerson(personName: string): IReduxAddPeopleAction
return
type: EReduxAddPeopleActionTypes.ADD_PERSON,
payload: personName
as const;

/**
* Action xoá một person
* @param id id của person bị xoá
*/
export function removePerson(id: number): IReduxRemovePeopleAction
return
type: EReduxRemovePeopleActionTypes.REMOVE_PERSON,
payload: id
as const;

B3. Thiết lập store

import * as React from “react”;
import Provider from “react-redux”;
import createStore from “redux”;
import rootReducer from “./reducers”;
import “./App.css”;
import Person from “./components”; // Component này sẽ viết sau nhé
/**
* Tạo store
* @param rootReducer tat ca reducer de tao state moi
*/
const store = createStore(rootReducer);
function App()
return (
// Provider sẽ phục vụ redux store xuyên thấu app của toàn bộ chúng ta

Hello World

);

export default App;

B4. Viết component Person và dispatch action, lấy state từ store

Trước khi viết component Person ta định nghĩa type cho state của nó

/**
* Định nghĩa type cho state person component
*/
export type TPersonState =
id: number;
name: string;
;

Nào bắt tay vào viết thôi

import * as React from “react”;
import useSelector, useDispatch from “react-redux”;
import TReducers from ‘../reducers’;
import addPerson, removePerson from ‘../actions’;
export const Person = () =>
const [newPerson, setNewPerson] = React.useState(“”);
const updateNewPerson = () => (e: React.ChangeEvent) =>
setNewPerson(e.currentTarget.value);
/** Function component dùng “`useSelector“` để lấy state từ store */
const people: TPersonState[] = useSelector((state: TReducers) => state.peopleReducer);
/** Function component dùng “`useDispatch“` hook để dispatch action */
const dispatch = useDispatch();
const handleSubmit = (e: React.FormEvent) =>
e.preventDefault();
dispatch(addPerson(newPerson)); // dispatch action thêm person
setNewPerson(“”);
;
const dispatchRemovePerson = (id: number) => () =>
dispatch(removePerson(id)); // dispatch action xoá person
;
return (

);
;

Github

Các bạn tải về src code ở đây

Nguồn tìm hiểu thêm

medium

Comments

Tags

reacttypescriptredux

Published

September 16, 2022

Comments

View all comments

://.youtube/watch?v=oDO40MCPaKg

Video Dispatch trong React là gì ?

Bạn vừa đọc tài liệu Với Một số hướng dẫn một cách rõ ràng hơn về Review Dispatch trong React là gì tiên tiến và phát triển nhất

Chia Sẻ Link Download Dispatch trong React là gì miễn phí

Bạn đang tìm một số trong những ShareLink Download Dispatch trong React là gì Free.

Giải đáp vướng mắc về Dispatch trong React là gì

Nếu sau khi đọc nội dung bài viết Dispatch trong React là gì vẫn chưa hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha
#Dispatch #trong #React #là #gì