ด้วย Redux เราสามารถใช้เพื่อจัดเก็บข้อมูลในตำแหน่งศูนย์กลางในแอป JavaScript ของเรา สามารถทำงานคนเดียวและยังเป็นโซลูชันการจัดการสถานะยอดนิยมสำหรับแอป React เมื่อรวมกับ React-Redux

ในบทความนี้เราจะดู Hooks React-Redux Hooks API ใหม่

การใช้ useSelector Hook ใน React Redux App

ตะขอ API ประกอบด้วยuseSelector, useDispatchและuseStoreตะขอ

useSelectorเบ็ดใช้selectorฟังก์ชั่นในการเลือกข้อมูลจากการจัดเก็บและฟังก์ชั่นอื่นequalityFnเพื่อเปรียบเทียบพวกเขาก่อนที่จะกลับผลและกำหนดเวลาที่จะทำให้หากข้อมูลจากรัฐก่อนหน้านี้และในปัจจุบันมีความแตกต่าง

การโทรใช้รูปแบบต่อไปนี้:

const result : any = useSelector(selector : Function, equalityFn? : Function)

ฟังก์ชันตัวเลือกอาจส่งคืนค่าใด ๆ ที่เป็นผลลัพธ์ไม่ใช่แค่วัตถุ ค่าส่งคืนของตัวเลือกจะถูกใช้เป็นค่าส่งคืนของuseSelectorเบ็ด

เมื่อมีการส่งการดำเนินการuseSelectorจะทำการเปรียบเทียบแบบตื้นของค่าผลลัพธ์ของตัวเลือกก่อนหน้ากับค่าปัจจุบัน

selectorฟังก์ชั่นไม่ได้รับownPropsการโต้แย้ง สามารถใช้อุปกรณ์ประกอบฉากผ่านการปิดหรือใช้ตัวเลือกเคอร์รี่

เราอาจเรียกได้useSelectorหลายครั้งภายในองค์ประกอบฟังก์ชันเดียว การโทรแต่ละครั้งจะสร้างการสมัครสมาชิกแต่ละรายการไปยังร้านค้า Redux React update batching behavior จะทำให้หลาย ๆuseSelectors ในคอมโพเนนต์เดียวกันคืนค่าใหม่ควรส่งคืนใน re-render ครั้งเดียวเท่านั้น

การเปรียบเทียบและอัปเดตความเท่าเทียมกัน

ฟังก์ชันตัวเลือกที่ให้มาจะถูกเรียกใช้และผลลัพธ์จะถูกส่งกลับจากuseSelectorเบ็ด ผลลัพธ์ที่แคชไว้อาจถูกส่งกลับหากตัวเลือกถูกเรียกใช้และส่งกลับผลลัพธ์เดียวกัน

useSelector บังคับให้แสดงผลซ้ำหากผลลัพธ์ตัวเลือกแตกต่างจากผลลัพธ์สุดท้ายเท่านั้น

ซึ่งแตกต่างจากconnectที่ใช้การตรวจสอบความเท่าเทียมกันตื้น ๆ กับผลลัพธ์ของการmapStateโทรเพื่อพิจารณาว่าจำเป็นต้องมีการเรนเดอร์หรือไม่

หากเราต้องการดึงค่าหลายค่าจากที่เก็บเราสามารถเรียกได้useSelectorหลายครั้งโดยการเรียกแต่ละครั้งจะส่งคืนค่าฟิลด์เดียวใช้ Reselect หรือไลบรารีที่คล้ายกันเพื่อสร้างตัวเลือกแบบบันทึกที่ส่งคืนค่าหลายค่าในอ็อบเจ็กต์ แต่ส่งคืนอ็อบเจ็กต์ใหม่เมื่อหนึ่ง ของค่ามีการเปลี่ยนแปลง

เรายังสามารถใช้shallowEqualฟังก์ชันจาก React-Redux เป็นequalityFnอาร์กิวเมนต์useSelectorได้

ตัวอย่างเช่นเราสามารถใช้useSelectorดังนี้:

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useSelector, useDispatch } from "react-redux";
import { createStore } from "redux";
function count(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}
const store = createStore(count);
function App() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();
return (
    <div className="App">
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
      <p>{count}</p>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

จากนั้นเราได้รับฟังก์ชั่นdispatchuseDispatch

เราสามารถใช้อาร์กิวเมนต์ที่สองของuseSelecthook ได้ดังนี้:

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useSelector, useDispatch, shallowEqual } from "react-redux";
import { createStore } from "redux";
function count(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}
const store = createStore(count);
function App() {
  const count = useSelector(state => state, shallowEqual);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
      <p>{count}</p>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

สรุป

เราสามารถใช้useSelectorhook เพื่อรับข้อมูลจาก Redux store ใน React component

ต้องใช้ 2 อาร์กิวเมนต์ อาร์กิวเมนต์แรกคือฟังก์ชันที่ส่งคืนสถานะและอาร์กิวเมนต์ที่สองคือฟังก์ชันที่ตรวจสอบว่าสถานะก่อนหน้าและสถานะปัจจุบันเท่ากันหรือไม่เพื่อกำหนดว่าจะอัปเดตเมื่อใด

หมายเหตุจาก JavaScript เป็นภาษาอังกฤษล้วน

เราได้เปิดตัวสิ่งพิมพ์ใหม่สามฉบับ! แสดงความรักที่มีต่อสิ่งพิมพ์ใหม่ของเราโดยติดตามพวกเขา: AI ในภาษาอังกฤษธรรมดา , UX ในภาษาอังกฤษธรรมดา , Python ในภาษาอังกฤษธรรมดา - ขอบคุณและเรียนรู้ต่อไป

นอกจากนี้เรายังสนใจที่จะช่วยส่งเสริมเนื้อหาที่มีคุณภาพอยู่เสมอ หากคุณมีบทความที่คุณต้องการส่งไปยังสิ่งพิมพ์ใด ๆ ของเราโปรดส่งอีเมลถึงเราที่[email protected] พร้อมชื่อผู้ใช้ขนาดกลางของคุณและเราจะเพิ่มคุณเป็นนักเขียน และแจ้งให้เราทราบด้วยว่าคุณต้องการเพิ่มสิ่งพิมพ์ใด