Memudahkan Pengurusan Negeri dalam Reaksi: Pengenalan kepada F-Box React

"Oh tidak... keadaan saya kucar-kacir lagi."

Apabila menguruskan keadaan dengan React, pernahkah anda menghadapi masalah seperti ini?

• Walaupun useState dan useReducer mudah, keadaan melepasi sekeliling menjadi menyusahkan apabila bilangan komponen bertambah.
• Untuk berkongsi keadaan antara berbilang komponen, anda sering menggunakan penggerudian prop atau memperkenalkan useContext.
• Perpustakaan seperti Redux berkuasa tetapi dilengkapi dengan keluk pembelajaran yang curam.

"Adakah tiada cara yang lebih mudah untuk mengurus negeri?"

Itulah sebabnya saya mencipta F-Box React.
Dengan F-Box React, anda boleh melepaskan diri daripada boilerplate pengurusan negeri dan memastikan kod anda mudah!

Jadual Kandungan

1. Pengenalan
2. Contoh Asas: Apl Kaunter
3. RBox: Boleh Digunakan di Luar Reaksi
4. Perkongsian Keadaan Merentas Berbilang Komponen
5. Menggunakan useRBox sebagai Pengganti untuk useReducer
6. Butiran dan Latar Belakang F-Box React
7. Kesimpulan

pengenalan

Mari kita mulakan dengan melihat contoh kod konkrit untuk memahami cara menggunakan F-Box React. Dalam bahagian ini, kami akan membandingkan useState dengan useRBox menggunakan apl kaunter mudah sebagai contoh.

Contoh Asas: Apl Kaunter

Cara Reaksi Biasa (useState)

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default Counter

Pendekatan klasik ini menggunakan useState untuk mengurus kiraan.

Menggunakan F-Box React

import { useRBox, set } from "f-box-react"

function Counter() {
  const [count, countBox] = useRBox(0) // Create an RBox with initial value 0
  const setCount = set(countBox) // Get a convenient updater function for the RBox

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default Counter

Di sini, kami melaksanakan kaunter menggunakan useRBox. Memandangkan useRBox mengembalikan pasangan [value, RBox], ia boleh digunakan sangat serupa dengan useState.

RBox: Boleh Digunakan Di Luar React

import { RBox } from "f-box-core"

const numberBox = RBox.pack(0)

// Subscribe to changes and log updates
numberBox.subscribe((newValue) => {
  console.log(`Updated numberBox: ${newValue}`)
})

// Change the value, which notifies subscribers reactively
numberBox.setValue((prev) => prev + 1) // Updated numberBox: 1
numberBox.setValue((prev) => prev + 10) // Updated numberBox: 11

Seperti yang ditunjukkan di atas, RBox tidak bergantung pada React, jadi ia boleh digunakan untuk pengurusan data reaktif dalam mana-mana kod TypeScript.

Berkongsi Keadaan Merentas Berbilang Komponen

Cara Reaksi Biasa (dengan useContext)

import React, { createContext, useContext, useState } from "react"

const CounterContext = createContext()

function CounterProvider({ children }) {
  const [count, setCount] = useState(0)
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  )
}

function CounterDisplay() {
  const { count } = useContext(CounterContext)
  return <p>Count: {count}</p>
}

function CounterButton() {
  const { setCount } = useContext(CounterContext)
  return <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
}

function App() {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterButton />
    </CounterProvider>
  )
}

export default App

Kaedah ini menggunakan useContext untuk berkongsi keadaan, tetapi ia cenderung menjadikan kod itu bertele-tele.

Menggunakan F-Box React

import { RBox } from "f-box-core"
import { useRBox } from "f-box-react"

// Define a global RBox
const counterBox = RBox.pack(0)

function CounterDisplay() {
  const [count] = useRBox(counterBox)
  return <p>Count: {count}</p>
}

function CounterButton() {
  return (
    <button onClick={() => counterBox.setValue((prev) => prev + 1)}>+1</button>
  )
}

function App() {
  return (
    <div>
      <CounterDisplay />
      <CounterButton />
    </div>
  )
}

export default App

Di sini, kami mentakrifkan RBox global dan menggunakan useRBox dalam setiap komponen untuk berkongsi keadaan. Ini mengelakkan keperluan untuk useContext atau pembekal, memastikan kod mudah.

Menggunakan useRBox sebagai Pengganti untuk useReducer

Cara Reaksi Biasa (dengan useReducer)

import { useReducer } from "react"

type State = {
  name: string
  age: number
}

type Action =
  | { type: "incremented_age" }
  | { type: "changed_name"; nextName: string }

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "incremented_age": {
      return {
        name: state.name,
        age: state.age + 1,
      }
    }
    case "changed_name": {
      return {
        name: action.nextName,
        age: state.age,
      }
    }
  }
}

const initialState = { name: "Taylor", age: 42 }

export default function Form() {
  const [state, dispatch] = useReducer(reducer, initialState)

  function handleButtonClick() {
    dispatch({ type: "incremented_age" })
  }

  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    dispatch({
      type: "changed_name",
      nextName: e.target.value,
    })
  }

  return (
    <>
      <input value={state.name} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Increment age</button>
      <p>
        Hello, {state.name}. You are {state.age}.
      </p>
    </>
  )
}

Menggunakan F-Box React

import { useRBox, set } from "f-box-react"

function useUserState(_name: string, _age: number) {
  const [name, nameBox] = useRBox(_name)
  const [age, ageBox] = useRBox(_age)

  return {
    user: { name, age },
    changeName(e: React.ChangeEvent<HTMLInputElement>) {
      set(nameBox)(e.target.value)
    },
    incrementAge() {
      ageBox.setValue((prev) => prev + 1)
    },
  }
}

export default function Form() {
  const { user, changeName, incrementAge } = useUserState("Taylor", 42)

  return (
    <>
      <input value={user.name} onChange={changeName} />
      <button onClick={incrementAge}>Increment age</button>
      <p>
        Hello, {user.name}. You are {user.age}.
      </p>
    </>
  )
}

Dengan menggunakan useRBox, anda boleh mengurus keadaan tanpa menentukan pengurang atau jenis tindakan, memudahkan kod.

Butiran dan Latar Belakang F-Box React

Setakat ini, kami telah memperkenalkan penggunaan asas F-Box React melalui contoh kod. Seterusnya, kami akan merangkumi maklumat terperinci berikut:

• Latar Belakang: Mengapa F-Box React Dicipta?
• Konsep Teras (Butiran tentang RBox dan useRBox)
• Pemasangan dan Arahan Persediaan

Perkara ini penting untuk pemahaman yang lebih mendalam tentang F-Box React.

Latar Belakang: Mengapa F-Box React Dicipta?

Pada asalnya, saya membangunkan F-Box (f-box-core) semata-mata sebagai perpustakaan tujuan umum untuk pengaturcaraan berfungsi. F-Box menyediakan abstraksi seperti Box, Maybe, Either, dan Task untuk memudahkan transformasi data, kesan sampingan dan pengiraan tak segerak.

Dalam F-Box, bekas reaktif bernama RBox telah diperkenalkan. RBox memantau perubahan dalam nilainya dan mendayakan pengurusan keadaan reaktif.

Selepas mencipta RBox, saya berfikir, "Bagaimana jika saya menyepadukan kotak reaktif ini ke dalam React? Ia boleh memudahkan pengurusan keadaan dalam aplikasi React." Berdasarkan idea ini, saya telah membangunkan F-Box React (f-box-react)—kumpulan cangkuk yang memudahkan penggunaan RBox dalam komponen React.

Akibatnya, F-Box React ternyata mesra pengguna, menyediakan alat yang berkuasa untuk mengurus keadaan dalam React dengan cara yang mudah dan fleksibel.

Konsep Teras

Elemen utama F-Box React ialah:

• RBox
  Bekas yang membolehkan pengurusan keadaan reaktif. Ia boleh memerhati dan mengurus perubahan keadaan secara bebas daripada React.

• useRBox
  Cangkuk tersuai untuk menggunakan RBox dengan mudah dalam komponen React. Ia menyediakan API intuitif yang serupa dengan useState, membolehkan anda mendapatkan dan mengemas kini nilai reaktif.

Elemen ini bermaksud:

• Rasa seperti useState
  Keadaan pengendalian adalah intuitif seperti useState.

• Berkongsi keadaan dengan mudah merentas berbilang komponen
  Anda boleh berkongsi keadaan dengan mudah antara berbilang komponen.

• RBox boleh digunakan di luar React juga
  Kerana ia tidak bergantung pada React, ia juga boleh digunakan dalam persekitaran bukan React.

Ini menjadikan pengurusan negeri amat mudah.

Arahan Pemasangan dan Persediaan

Untuk menyepadukan F-Box React ke dalam projek anda, jalankan arahan berikut menggunakan npm atau yarn. Memandangkan F-Box React bergantung pada f-box-core, anda mesti memasang kedua-duanya serentak:

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default Counter

Selepas pemasangan, anda boleh mengimport dan menggunakan cangkuk seperti useRBox seperti yang ditunjukkan dalam contoh terdahulu:

import { useRBox, set } from "f-box-react"

function Counter() {
  const [count, countBox] = useRBox(0) // Create an RBox with initial value 0
  const setCount = set(countBox) // Get a convenient updater function for the RBox

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default Counter

Selain itu, pastikan f-box-core dipasang, kerana ia menyediakan bekas penting seperti RBox:

import { RBox } from "f-box-core"

const numberBox = RBox.pack(0)

// Subscribe to changes and log updates
numberBox.subscribe((newValue) => {
  console.log(`Updated numberBox: ${newValue}`)
})

// Change the value, which notifies subscribers reactively
numberBox.setValue((prev) => prev + 1) // Updated numberBox: 1
numberBox.setValue((prev) => prev + 10) // Updated numberBox: 11

Dengan persediaan ini, anda kini boleh mengurus keadaan menggunakan F-Box React.

Kesimpulan

Dengan menggunakan F-Box React, pengurusan keadaan dalam React menjadi lebih mudah dengan ketara:

1. Intuitif seperti useState
   Hanya berikan nilai awal kepada useRBox dan mula menggunakannya serta-merta.

2. RBox berfungsi di luar React
   Kerana ia tidak bergantung pada React, anda boleh menggunakannya di bahagian pelayan atau dalam persekitaran lain.

3. Perkongsian keadaan yang mudah
   Tentukan RBox global dan gunakan useRBox di mana sahaja anda memerlukannya untuk berkongsi keadaan merentas berbilang komponen. Ini menghapuskan keperluan untuk persediaan yang kompleks dengan useContext atau Redux.

Jika anda sedang mencari cara yang lebih mudah untuk mengurus keadaan, cuba F-Box React!

• npm
• GitHub

Kami telah memperkenalkan penggunaan asas dan kemudahan F-Box React di sini, tetapi F-Box menawarkan lebih banyak ciri. Ia boleh mengendalikan operasi tak segerak, pengendalian ralat dan senario yang lebih kompleks.

Untuk butiran lanjut, lihat Dokumen F-Box.
Saya harap F-Box React menjadikan pembangunan React dan TypeScript anda lebih menyeronokkan dan ringkas!

Atas ialah kandungan terperinci Memudahkan Pengurusan Negeri dalam Reaksi: Pengenalan kepada F-Box React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!