Konteks, Redux atau Komposisi?

Siaran ini pada asalnya diterbitkan pada 23 Februari 2023 @ halaman blog saya

Saya adalah salah seorang pembangun yang terkesan dengan pemberhentian syarikat teknologi baru-baru ini. Jadi, saya mula memberi temu duga untuk jawatan frontend dengan reaksi.

Di salah satu syarikat saya diberi masalah penggerudian prop klasik sebagai tindak balas,
dan diminta menyelesaikannya. Untuk memastikan perkara mudah, masalah yang diberikan adalah seperti
ini:

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard user={user} />
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ user }) {
  return (
    <div>
      <DashboardNav user={user} />
    </div>
  );
}

function DashboardNav({ user }) {
  return (
    <div>
      <WelcomeUser user={user} />
      <UserRole user={user} />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

Seperti yang anda boleh perhatikan, kami menghantar prop pengguna daripada komponen Apl kepada
komponen kanak-kanak WelcomeUser dan UserRole. Komponen perantaraan Dashboard dan DashboardNav hanya memajukan prop dan tidak benar-benar menggunakannya.

Ini ialah isu klasik penggerudian prop sebagai tindak balas.

Menariknya, penemuduga meminta untuk menyelesaikan masalah sama ada dengan sama ada React Context API
atau dengan menggunakan Redux.

Menyelesaikan dengan Konteks React

Menggunakan API konteks untuk menyelesaikan masalah ini akan kelihatan seperti kod di bawah.

const UserContext = React.createContext(undefined);

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Context
      <div>
        {user ? (
          <UserContext.Provider value={user}>
            <Dashboard />
          </UserContext.Provider>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <WelcomeUser />
      <UserRole />
    </div>
  );
}

function WelcomeUser() {
  const user = React.useContext(UserContext);
  return <div>Welcome {user.name}</div>;
}

function UserRole() {
  const user = React.useContext(UserContext);
  return <div>Role {user.role}</div>;
}

Kami sedang mencipta Konteks Pengguna dan membungkus Papan Pemuka dengan Pembekal, supaya
kita boleh menghantar prop yang kita mahukan kepada komponen anak yang sangat bersarang. Penyelesaian ini
berfungsi.

Penyelesaian oleh Redux

Jadi, jika kita melalui laluan redux klasik, kita perlu mencipta
yang serupa struktur dan bungkus semuanya dengan satu kedai global, yang mengandungi pengguna
objek.

Kod penyelesaian akan mengandungi satu tan boilerplate, kerana kami menggunakan redux untuk
menyelesaikan masalah mudah.

Saya baru sahaja memberikan intipati kod di bawah, tetapi jika anda benar-benar mahu meneroka sepenuhnya
kod, ini dia: selesaikan dengan redux.

export default function App() {
  return (
    <Provider store={store}>
      <ReduxConnectedApp />
    </Provider>
  );
}

function ReduxApp({ user, setUser }) {
  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Redux
      <div>
        {user ? <Dashboard /> : <button onClick={handleLogin}>Login</button>}
      </div>
    </div>
  );
}


function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <ConnectedWelcomeUser />
      <ConnectedUserRole />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

const mapStateToPropsWelcomeUser = (state) => ({ user: state });
const ConnectedWelcomeUser = connect(mapStateToPropsWelcomeUser)(WelcomeUser);

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

const mapStateToPropsUserRole = (state) => ({ user: state });
const ConnectedUserRole = connect(mapStateToPropsUserRole)(UserRole);

Kami telah menyambungkan komponen yang memerlukan akses kepada keadaan global
disimpan dalam redux.

Bagaimana saya menyelesaikannya

Setelah membaca tentang komposisi tindak balas, saya menyelesaikan masalah dengan membuat
penggunaan prop kanak-kanak, yang kelihatan seperti ini

export default function AppSolution() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard>
            <DashboardNav>
              <WelcomeUser user={user} />
              <UserRole user={user} />
            </DashboardNav>
          </Dashboard>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ children }) {
  return <div>{children}</div>;
}

function DashboardNav({ children }) {
  return <div>{children}</div>;
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

Jika anda fikirkan, ini adalah cara mudah untuk menyelesaikan masalah ini tanpa memperkenalkan
sebarang kerumitan seperti createContext atau react-redux. Kami juga mendapat manfaat lain seperti
sebagai

• Pada masa hadapan, jika kami memperkenalkan mana-mana keadaan di dalam Papan Pemuka dan memanipulasinya, kami DashboardNav tidak pernah dipaparkan semula.
• Dengan membekalkan prop hanya kepada komponen yang diperlukan, kami mempunyai keterlihatan yang baik daripada semua pengguna pengguna, tanpa perlu menavigasi antara komponen (fail) untuk cari mereka.

Corak ini bukan baharu, dan ia sudah pun diperkatakan dalam komuniti reaksi. Satu panduan yang baik ialah Menggunakan Komposisi dalam Reaksi untuk Mengelakkan "Penggerudian Prop"

Kesimpulan

Walau bagaimanapun, saya mendapat maklum balas daripada penemuduga, dan ia berlaku seperti ini

Wawancara tidak memahami masalah dengan betul dan tidak dapat memberikan penyelesaian yang diharapkan.

Saya rasa sebabnya sama ada penemuduga tidak mengetahui corak ini atau saya memilih untuk menyelesaikan masalah dengan cara yang tidak diminta.

Setelah berkata demikian, saya kini terdorong untuk menulis lebih banyak tentang corak yang menarik sebagai tindak balas, dengan harapan ia menjangkau khalayak yang lebih luas.

Beri tahu saya pendapat anda dengan berkongsi artikel ini.

Rujukan

• Penyelesaian Kotak Kod
• Sebelum anda menggunakan konteks - React Docs
• Menggunakan Komposisi dalam Reaksi untuk Mengelakkan "Penggerudian Prop"
• Jawapan Diblog: Panduan Lengkap (Kebanyakannya) untuk Tingkah Laku Reaksi Reaksi
• Jawapan Diblog: Mengapa Konteks Reaksi Bukan Alat "Pengurusan Negeri" (dan Mengapa Ia Tidak Menggantikan Redux)

Atas ialah kandungan terperinci Konteks, Redux atau Komposisi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!