Pengurusan Negeri dalam Reactjs: Panduan Memilih Alat Pengurusan Negeri yang Tepat untuk Projek Anda

Pengurusan negeri adalah penting dalam aplikasi React kerana ia membantu menjejaki data aplikasi. Memandangkan Antara Muka Pengguna(UI) ialah fungsi keadaan, memastikan keadaan aplikasi anda sentiasa terkini adalah penting. Dalam artikel ini, anda akan mempelajari cara memilih alat pengurusan keadaan yang betul untuk memenuhi keperluan aplikasi anda.

Nota: Artikel ini adalah untuk pembangun yang sudah mempunyai pengetahuan tentang reaksi tetapi ingin membuat pilihan yang lebih baik untuk aplikasi reaksi mereka berdasarkan pengurusan negeri. Jika anda masih belum tahu bertindak balas, lihat dokumen untuk mula belajar.

Memahami Pengurusan Negeri dan Negeri.

Berdasarkan prasyarat yang dinyatakan di atas, anda mungkin sudah mempunyai sedikit pengetahuan tentang tindak balas. Tetapi mari segarkan ingatan kita sedikit.

Apa itu Negeri?

State dalam React ialah ingatan komponen, mengandungi maklumat khusus untuk komponen tersebut. Dalam istilah pengaturcaraan, state ialah objek JavaScript yang hanya mengandungi data mengenai komponen.

Seperti yang dinyatakan sebelum ini, UI dalam React dipengaruhi secara langsung oleh keadaan. Perubahan dalam keadaan berlaku terutamanya disebabkan oleh interaksi pengguna seperti klik butang, peristiwa tetikus, tindakan input dan banyak lagi. Oleh itu, mengurus keadaan dalam aplikasi kami adalah penting untuk memastikan pengguna mengalami antara muka terkini pada skrin mereka berdasarkan interaksi mereka.

Pengurusan Negeri dalam React.

Apabila keadaan komponen React berubah, ia menyebabkan komponen itu dipaparkan semula. Dalam proses ini, komponen dimusnahkan dan dibina semula dari awal di belakang tabir.

Kebanyakan aplikasi React mengalami banyak kemas kini keadaan semasa pengguna berinteraksi dengan apl itu. Adalah penting untuk menggunakan teknik pengurusan negeri yang terbaik untuk meningkatkan pengalaman pengguna; lagipun, menggunakan apl yang tidak responsif tidak menarik. Bayangkan mengklik butang suka pada apl instagram anda dan ia tidak bertindak balas. Menjengkelkan kan?

Tanpa Ado lagi, mari kita selami pilihan pengurusan negeri yang berbeza yang boleh anda terokai untuk projek anda, menerangkan bila dan sebab anda memerlukan setiap satu.

Pilihan Pengurusan Negeri yang Berbeza dalam React.

Terdapat banyak pilihan pengurusan negeri yang tersedia, tetapi dalam artikel ini, kami akan membincangkan beberapa yang paling biasa digunakan yang memenuhi aplikasi semua saiz, dari kecil hingga sangat besar. Pilihan yang akan kita bincangkan termasuk:

• Tindak balas cangkuk terbina dalam
• API Konteks
• Perpustakaan pihak ketiga

Bertindak balas cangkuk terbina dalam untuk pengurusan negeri

React menyediakan cangkuk terbina dalam untuk menguruskan keadaan dengan komponen berfungsi. Cangkuk ini mudah digunakan dan sesuai untuk pengurusan negeri setempat.

Keadaan setempat ialah keadaan yang hanya diperlukan oleh satu komponen dan tidak menjejaskan mana-mana komponen lain.

Keadaan global ialah keadaan yang diperlukan oleh berbilang komponen, dan kami juga akan membincangkan cara mengurusnya kemudian dalam artikel ini.

useState Hook

Sememangnya, komponen berfungsi tidak mempunyai kewarganegaraan, tetapi React memperkenalkan cangkuk useState untuk membolehkan pembangun menambahkan pembolehubah keadaan pada komponen yang memerlukannya.

Cakuk ini dipanggil di peringkat atas komponen anda dengan nilai keadaan awal yang dihantar, dan ia mengembalikan tatasusunan nilai semasa dan fungsi penetap. Berikut ialah contoh kod cara anda boleh menggunakannya:

import { useState} from 'react';

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

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeYou clicked {count} times94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 setCount(count + 1)}>
        Click me
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

Penjelasan

• Kiraan awal bermula pada 0
• Fungsi kiraan yang ditetapkan dipanggil apabila butang diklik, mengemas kini pembolehubah kiraan dengan nilai terkini pada setiap masa.

Bila hendak menggunakan useState Hook

Kait useState sesuai untuk menguruskan keadaan dalam komponen anda apabila:

• Pengurusan Negeri Tempatan: Negeri hanya diperlukan dalam satu komponen dan tidak perlu dikongsi merentas berbilang komponen.
• Logik Keadaan Mudah: Logik keadaan adalah mudah, seperti menogol nilai, pembilang, input borang dan syarat mudah.
• Hierarki Komponen Terhad: Keadaan tidak perlu dilalui secara mendalam melalui berbilang lapisan komponen, yang boleh membawa kepada penggerudian prop.
• Projek Bersaiz Kecil: Aplikasi ini tidak mempunyai keperluan pengurusan negeri yang meluas yang memerlukan penyelesaian yang lebih maju.

Contoh:

• Managing form input values.
• Toggling UI elements (e.g., show/hide).
• Simple counters and trackers.

The useState hook provides a simple and efficient way to handle state for these scenarios, ensuring your components remain manageable and easy to understand.

useReducer Hook

The useReducer hook was introduced by the React team to handle complex state logic or case-sensitive updates. Here are the key parameters you need to keep in mind while using useReducer:

1. reducer: This is the function where all the state updating code is executed. It takes the current state and an action as arguments and returns a new state.
2. initialArg: This is the initial state that you declare from the onset.
3. dispatch: This is the function called in the event handler. It is returned from the useReducer hook and is used to send actions to the reducer.
4. state: This is the current state value also returned by the useReducer hook.

Here’s a code example of how to use this hook:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeCount: {state.count}94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'increment' })}>
        +
      65281c5ac262bf6d81768915a4a77ac0
      5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'decrement' })}>
        -
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

Key Takeaways:

1. Just like every other hook, useReducer must be called at the top level of the component.
2. Every time the dispatch function is called, it triggers the reducer, leading to a state update depending on the action. This causes the component to re-render, maintaining the goal of keeping the UI and the current state in sync.
3. You should only specify the action type in the dispatch function and a payload if need be.

When to Use the useReducer Hook

The useReducer hook is ideal for managing state in your components when:

• Complex State Logic: The state logic is complex, involves multiple sub-values, or the next state depends on the previous state.
• State Transition Management: When you need to handle multiple state transitions based on different actions.

Examples of Projects that Require useReducer

• Complex forms: A multi-step form in a registration process.Each step of the form collects different data, and the state needs to be managed for all steps, with validation and submission logic.

• Advanced to-do-list: A to-do list application with features like adding, removing, editing, and filtering tasks.

• E-commerce cart management: An e-commerce site with a shopping cart that handles adding, removing, and updating item quantities.

State Management with Context API

The previously discussed options are great, but they come with a downside: the problem of prop drilling. Prop drilling occurs when a state needs to be passed down through multiple nested components from a parent to a child. This can lead to verbose and hard-to-maintain code, as each intermediary component needs to explicitly pass the state or function down the tree.Global state, which is the state needed by multiple components, becomes particularly challenging to manage with prop drilling.

To solve this problem, React introduced the Context API, which is used for managing global state. The Context API allows you to create a context object that can be accessed by any component within its provider, eliminating the need to pass props through intermediate components.

How to Use the Context API

Here’s a step-by-step guide on how to use it:

1. Create a Context: First, create a context using the createContext function. This creates an object with a Provider and a Consumer.
   

   import React, { createContext } from 'react';
   const MyContext = createContext();
   

2. Provide Context Value: Wrap the components that need access to the context with the Provider component. Pass the value you want to share as a prop to the Provider.
   

   function App() {
    const [state, setState] = useState("Hello, World!");
    return (
      <MyContext.Provider value={{ state, setState }}>
        <ChildComponent />
      </MyContext.Provider>
    );
   }
   

3. Consume Context Value: This Use the context value in the child components by using the useContext hook or the Consumer component.
   

   import React, { useContext } from 'react';
   import MyContext from './path-to-context';
   function ChildComponent() {
    const { state, setState } = useContext(MyContext);
    return (
      <div>
        <p>{state}</p>
        <button onClick={() => setState("Context API is awesome!")}>
          Change Text
        </button>
      </div>
    );
   }
   

Example Usage

Here’s a complete example demonstrating how to use the Context API:

import React, { createContext, useState, useContext } from 'react';

// Create a context
const MyContext = createContext();

function App() {
  const [state, setState] = useState("Hello, World!");

  return (
    43ad9860753b01834247292615a2b05f
      88f9b25aeabe4ed8ddd63b3febe25d20
    8e66e6aff1f0a13ebced51b2c1b5d182
  );
}

function ChildComponent() {
  const { state, setState } = useContext(MyContext);

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846bee{state}94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 setState("Context API is awesome!")}>
        Change Text
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

export default App;

Key Takeaways:

1. Mencipta Konteks: createContext() digunakan untuk mencipta objek konteks, yang termasuk Penyedia dan Pengguna.
2. Menyediakan Konteks: Komponen Penyedia digunakan untuk menghantar nilai konteks semasa kepada pokok komponen yang memerlukannya.
3. Menggunakan Konteks: Cangkuk useContext digunakan dalam komponen berfungsi untuk mengakses nilai konteks.

Bila hendak menggunakan API Konteks

API Konteks sesuai untuk senario di mana anda perlu berkongsi keadaan atau data merentas berbilang komponen tanpa perlu melepasi prop melalui setiap peringkat pepohon komponen. Ia amat berguna apabila berurusan dengan keadaan global atau apabila keadaan perlu diakses oleh komponen bersarang dalam. Berikut ialah beberapa kes khusus di mana API Konteks bermanfaat:

1. Tema:

   • Contoh: Mengurus tema (mod terang atau gelap) merentas keseluruhan aplikasi.
   • Butiran: Keadaan tema dikongsi merentas berbilang komponen, memastikan UI mencerminkan tema yang dipilih secara konsisten.

2. Pengesahan Pengguna:

   • Contoh: Menguruskan keadaan pengesahan pengguna dan maklumat pengguna.
   • Butiran: Keadaan pengesahan (log masuk/keluar) dan data pengguna (nama pengguna, peranan, dll.) perlu diakses oleh pelbagai komponen, seperti pengepala, halaman profil dan laluan yang dilindungi.

3. Penyetempatan Bahasa:

   • Contoh: Mengendalikan sokongan berbilang bahasa dalam aplikasi.
   • Butiran: Keadaan bahasa yang dipilih dan data terjemahan perlu tersedia untuk komponen pemaparan teks di seluruh apl.

4. Pengurusan Negeri Kompleks untuk Borang:

   • Contoh: Berkongsi data borang dan status pengesahan merentas berbilang medan dan komponen borang.
   • Butiran: Borang yang merangkumi berbilang langkah atau komponen boleh mendapat manfaat daripada keadaan kongsi yang menjejaki nilai input dan ralat pengesahan.

Dengan memahami masa dan cara menggunakan API Konteks, anda boleh mengurus keadaan global dalam aplikasi React dengan lebih cekap. Pendekatan ini membantu mengelakkan perangkap penggerudian prop, memastikan pangkalan kod anda bersih dan boleh diselenggara serta menyumbang kepada penciptaan aplikasi React yang lebih mantap dan berskala.

Perpustakaan Pihak Ketiga untuk Pengurusan Negeri

Perpustakaan pengurusan negeri pihak ketiga menyediakan alatan dan corak tambahan untuk mengurus keadaan dengan cekap, terutamanya dalam aplikasi yang kompleks. Perpustakaan ini selalunya disertakan dengan ciri dan pengoptimuman lanjutan yang mempertingkatkan penyelesaian pengurusan keadaan terbina dalam yang disediakan oleh React. Beberapa pustaka pengurusan negeri pihak ketiga yang paling popular termasuk Redux, MobX, Recoil dan Zustand.

Dalam artikel ini, kami akan membincangkan Redux. Jika anda perlu menggunakan orang lain yang disebutkan, anda boleh menyemak dokumentasi mereka; Saya akan menambah pautan pada akhir artikel ini. Jangan berasa terharu, kebanyakan alat ini agak mesra pemula. Sekarang, mari pergi terus ke Redux!

Pengurusan Negeri dengan Redux

Redux ialah perpustakaan pengurusan negeri pihak ketiga yang menyediakan penyelesaian optimum untuk penggerudian prop dan pengurusan keadaan global dengan menyimpan semua keadaan di tempat pusat yang dipanggil stor. Ini bermakna semua komponen boleh mengakses keadaan ini secara bebas, tidak kira kedudukannya dalam pepohon komponen.

Ini adalah pengubah permainan kerana apabila aplikasi semakin besar dan terdapat lebih banyak keadaan untuk dikendalikan, adalah penting untuk mengabstrakkannya di satu tempat. Organisasi ini menjadikan kod kami lebih bersih dan nyahpepijat lebih mudah. Kedengaran hebat, bukan?

Perlu diingat bahawa Redux tidak terhad secara khusus kepada React; ia ialah pustaka bebas yang boleh disepadukan dengan rangka kerja JavaScript lain seperti Angular, Vue dan banyak lagi.

Cara Menggunakan Redux dalam React

Sebelum kita pergi ke proses langkah demi langkah menggunakan Redux, adalah penting untuk memahami konsep utama yang membentuk asas Redux:

1. Store: The store is the central repository for an application's state. It holds the entire state tree and provides methods to access and update the state.
2. Reducers: Reducers are pure functions that determine how the state changes in response to actions. They take the current state and an action as arguments and return a new state.
3. Actions: Actions are plain JavaScript objects that describe what happened in the application. Each action has a type property and may include additional data.
4. Action Creators: Action creators are functions that create and return action objects. They encapsulate the action creation logic, making the code more manageable.
5. Dispatch: Dispatch is a function provided by the Redux store that sends actions to the store. It triggers reducers to process the action and update the state.

Understanding these concepts is essential to effectively implementing Redux in your React application.

How to Integrate and Use Redux in Your React Project

In this subsection, you will learn a step-by-step approach to integrating Redux with your React projects. We'll use a simple counter-example to illustrate the process. Here are the steps:

Setting up your Project

• Create a React app with Vite:
  

   npm create vite@latest projectName
  

• Navigate into your project directory:
  

   cd projectName
  

• Install Redux Toolkit and React-Redux:
  

   npm install @reduxjs/toolkit react-redux
  

1. Creating the Redux Store: Create a new file src/app/store.js and set up the Redux store:
   

    import { createStore } from 'redux';
    import rootReducer from '../features/counter/counterReducer';
   
    const store = createStore(rootReducer);
   
    export default store;
   

2. Creating the Reducer: Create a new directory src/features/counter and inside it, create a file counterReducer.js:
   

    const initialState = {
      value: 0,
    };
   
    function counterReducer(state = initialState, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { ...state, value: state.value + 1 };
        case 'DECREMENT':
          return { ...state, value: state.value - 1 };
        case 'INCREMENT_BY_AMOUNT':
          return { ...state, value: state.value + action.payload };
        default:
          return state;
      }
    }
   
    export default counterReducer;
   

3. Creating Actions: In the same directory, create a file counterActions.js:
   

    export const increment = () => ({
      type: 'INCREMENT',
    });
   
    export const decrement = () => ({
      type: 'DECREMENT',
    });
   
    export const incrementByAmount = (amount) => ({
      type: 'INCREMENT_BY_AMOUNT',
      payload: amount,
    });
   

4. Providing the Store to Your App: Wrap your application with the Redux Provider in src/main.jsx:
   

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './app/store';
    import App from './App';
    import './index.css';
   
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
   

5. Connecting React Components to Redux: In your src/App.jsx, use the Redux state and dispatch actions:
   

    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { increment, decrement, incrementByAmount } from './features/counter/counterActions';
   
    function App() {
      const count = useSelector((state) => state.value);
      const dispatch = useDispatch();
   
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => dispatch(increment())}>+</button>
          <button onClick={() => dispatch(decrement())}>-</button>
          <button onClick={() => dispatch(incrementByAmount(2))}>+2</button>
        </div>
      );
    }
   
    export default App;
   

This is how to use Redux in your React applications. If you need to know more, you can check the documentation. However, Redux has introduced a more optimized way of writing Redux applications with Redux Toolkit (RTK).

Before RTK, the legacy Redux was the only way to use Redux. Now, we have Redux Toolkit with some optimized features, and that is what we will be covering in the next section.

How to Use Redux Toolkit in React

RTK introduces several key concepts that simplify state management. The major ones you need to know are:

1. Slices: A slice is a collection of Redux reducer logic and actions for a single feature of your application. It streamlines the process of writing reducers and actions into a single unit.

2. createSlice: This RTK function helps you create a slice, automatically generating action creators and action types. It reduces boilerplate code significantly.

3. configureStore: This function simplifies the process of creating a Redux store by providing good defaults, including integration with the Redux DevTools Extension and middleware like redux-thunk.

4. createAsyncThunk: This function is used for handling asynchronous logic. It generates actions and action creators to manage different stages of an asynchronous operation (e.g., pending, fulfilled, and rejected).

5. Selectors: Functions that extract and derive pieces of state from the store. RTK encourages using selectors to encapsulate and reuse state logic.

6. RTK Query: An advanced data fetching and caching tool built into RTK. It simplifies handling server-side data, reducing the need for boilerplate code related to data fetching, caching, and synchronization.

Understanding these concepts is essential for effectively implementing Redux Toolkit in your React application.

How to integrate and use Redux Toolkit in your React project

In this subsection, you'll learn a step-by-step approach to integrating Redux Toolkit with your React projects. We’ll use a simple counter example, similar to the one used in the plain Redux example, to highlight the improvements and optimizations Redux Toolkit offers. Here are the steps:

Setting up your Project

• Create a React app with Vite:
  

   npm create vite@latest projectName
  

• Navigate into your project directory:
  

   cd projectName
  

• Install Redux Toolkit and React-Redux:
  

   npm install @reduxjs/toolkit react-redux
  

1. Creating a Redux Slice: Create a new file for your slice (e.g., counterSlice.js):
   

    import { createSlice } from '@reduxjs/toolkit';
   
    const counterSlice = createSlice({
      name: 'counter',
      initialState: { count: 0 },
      reducers: {
        increment: (state) => {
          state.count += 1;
        },
        decrement: (state) => {
          state.count -= 1;
        },
      },
    });
   
    export const { increment, decrement } = counterSlice.actions;
    export default counterSlice.reducer;
   

2. Configuring the Store: Create a new file for your store (e.g., store.js):
   

    import { configureStore } from '@reduxjs/toolkit';
    import counterReducer from './counterSlice';
   
    const store = configureStore({
      reducer: {
        counter: counterReducer,
      },
    });
   
    export default store;
   

3. Providing the Store to Your App: Wrap your app with the Provider component in your main file (e.g., main.js or index.js):
   

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './store';
    import App from './App';
   
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
   

4. Using Redux State and Actions in Your Components: Use the useSelector and useDispatch hooks in your component (e.g., Counter.js):
   

    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { increment, decrement } from './counterSlice';
   
    function Counter() {
      const count = useSelector((state) => state.counter.count);
      const dispatch = useDispatch();
   
      return (
        <div>
          <p>{count}</p>
          <button onClick={() => dispatch(increment())}>+</button>
          <button onClick={() => dispatch(decrement())}>-</button>
        </div>
      );
    }
   
    export default Counter;
   

Redux Toolkit (RTK) simplifies and optimizes the traditional Redux setup by reducing boilerplate code and integrating essential tools and best practices. While legacy Redux requires manual configuration and verbose code for actions and reducers, RTK offers a more streamlined approach with utility functions like configureStore, createSlice, and createAsyncThunk.

RTK includes built-in middleware, integrates seamlessly with Redux DevTools, and promotes a standard way of writing Redux logic, making state management in React applications more efficient and maintainable. If you need to use Redux, I recommend using the modern Redux Toolkit, as it is now recommended by Redux. You can check the docs to learn more about RTK.

When to Use Redux

Redux is a powerful state management library, but it isn't always necessary for every React application. Here are some scenarios when using Redux might be beneficial:

1. Complex State Logic:

   • When your application has complex state logic that is difficult to manage with React's built-in hooks like useState and useReducer.
   • Example: An e-commerce application with multiple product filters, user authentication, and a shopping cart.

2. Global State Management:

   • When you have state that needs to be accessed and updated by many components across different parts of your application.
   • Example: A user authentication system where user data needs to be accessible throughout the application.

3. Consistent and Predictable State:

   • When you need a predictable state container that helps you debug and test your application more easily.
   • Example: A large-scale application where you need to maintain and track the state transitions clearly.

4. DevTools Integration:

   • When you want to leverage powerful developer tools like Redux DevTools for tracking state changes and debugging.
   • Example: During development, Redux DevTools can help in understanding how the state changes in response to actions.

Conclusion

I hope by now you have gained more clarity and insights into choosing the right state management tool for your projects. We have covered tools that cater to both small and extremely large projects. With the knowledge gained from this article, you can now make more informed decisions for your projects. See you next time on another insightful topic.

Further reading and learning

• Redux docs

• Zustand docs

• Mobx docs

• Recoil docs

• React docs

Atas ialah kandungan terperinci Pengurusan Negeri dalam Reactjs: Panduan Memilih Alat Pengurusan Negeri yang Tepat untuk Projek Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!