Apakah Redux, dan bagaimana kita boleh menggunakannya?

Apakah Redux, dan bagaimana kita menggunakannya? Redux adalah seperti alat yang berguna untuk mengurus keadaan program JavaScript. Ia membantu memastikan segala-galanya teratur dan memudahkan untuk bekerja. Anggap ia sebagai cara untuk menjejaki perkara yang berlaku dalam program anda dan pastikan semuanya kekal stabil.

Pada asasnya, Redux boleh berfungsi dengan lancar dengan pustaka atau rangka kerja JavaScript yang berbeza seperti React, Angular atau Vue. Ia menjadikan mereka lebih baik dalam menguruskan perkara yang mereka lakukan. Itulah sebabnya mempelajari tentang Redux sangat penting untuk pembangun web.

Dalam artikel ini, kita akan bercakap tentang asas Redux. Kami akan menerangkan apa itu, sebab orang menggunakannya dan cara ia berfungsi. Kami akan melihat bahagian penting seperti Store, Actions dan Reducer, yang merupakan blok binaan Redux. Menjadikan pembelajaran dan pelaburan dalam latihan Redux sangat penting untuk pembangun web.

Apakah Redux dan Mengapa Menggunakannya?

Satu soalan biasa tentang Redux ialah mengapa orang menggunakannya. Jadi, apa sebabnya? Nah, Redux sangat berharga untuk menguruskan keadaan aplikasi, terutamanya apabila ia menjadi lebih kompleks. Mari kita ambil contoh tapak web e-dagang dengan bahagian yang berbeza seperti troli beli-belah, profil pengguna, dll.

Mari fokus pada bahagian troli beli-belah untuk pemahaman yang lebih baik. Ia bertanggungjawab untuk menunjukkan bilangan item dalam troli pengguna. Keadaannya termasuk semua item yang ditambahkan dan jumlah kiraannya. Maklumat ini perlu sentiasa dikemas kini dan dipaparkan dengan tepat kepada pengguna.

Apabila pengguna menambah atau mengalih keluar item, program perlu mengendalikan tindakan ini secara dalaman, mengemas kini keadaan troli dan mencerminkan perubahan dalam antara muka pengguna.

Pada mulanya, mengurus keadaan dalam komponen yang berasingan berfungsi dengan baik, tetapi apabila program semakin kompleks, perkongsian keadaan antara komponen untuk tugas seperti paparan, kemas kini atau pelaksanaan logik berdasarkan data yang dikongsi menjadi perlu. Di sinilah Redux bersinar dan memberikan jawapan utama mengapa Redux digunakan.

Redux bertindak sebagai perpustakaan pengurusan negeri berpusat, mengendalikan keadaan program. Ia menyediakan API penting untuk menukar dan mengakses keadaan semasa dan memudahkan proses mengurus berbilang keadaan merentas komponen berbeza dengan berkesan.

Apakah yang membuatkan Redux boleh diramalkan?

Apa yang membezakan Redux dari segi kebolehramalan ialah pematuhan ketatnya kepada prinsip kebolehubah keadaan. Dalam Redux, menukar keadaan aplikasi memerlukan penghantaran jenis tindakan tertentu yang menyatakan dengan tepat perubahan yang diingini. Tindakan ini kemudiannya diproses oleh pengurang, yang tugasnya semata-mata untuk mengendalikan keadaan semasa dan tindakan, menghasilkan keadaan keadaan baharu dan dikemas kini. Reducer tidak mengubah suai keadaan secara langsung; sebaliknya, mereka mencipta tika keadaan baharu yang menggabungkan perubahan yang diperlukan.

Seperti yang dinyatakan oleh pencipta Redux Dan Abramov:

tindakan boleh dirakam dan dimainkan semula kemudian, memastikan pengurusan negeri yang konsisten.

Untuk menggambarkan konsep ini dan untuk memahami dengan tepat apa itu Redux, mari kita pertimbangkan contoh dari kedai dalam talian. Jika troli beli-belah pada mulanya mengandungi 0 item, menambah produk meningkatkan kiraan item kepada 1. Mengulangi tindakan ini meningkatkan lagi kiraan item, memastikan hasil yang boleh diramalkan.

Dengan menghasilkan keadaan akhir yang sama secara konsisten berdasarkan keadaan awal dan urutan tindakan tertentu, Redux menjamin kebolehramalan. Dalam bahagian seterusnya, kita akan menyelidiki dengan lebih mendalam komponen utama Redux.

Komponen teras Redux ialah:

Untuk lebih memahami apa itu Redux dan cara ia berfungsi, mari kita terokai komponen utamanya. Pada asasnya, Redux terdiri daripada tiga bahagian berikut:

**1. Kedai

1. Tindakan
2. Pengurang**

Apakah Kedai di Redux?

The Store dalam Redux bertindak sebagai repositori berpusat untuk keadaan global aplikasi, yang disusun dalam struktur pokok hierarki. Adalah penting untuk menganggap Redux Store sebagai sumber tunggal untuk keadaan aplikasi.

Dengan menyepadukan Store ke dalam komponen utama (cth., App.js) menggunakan komponen Provider, semua komponen anak dalam aplikasi mendapat akses kepada keadaan yang disimpan secara global dalam Redux Store. Ini secara berkesan mewujudkan jenis keadaan yang boleh diakses secara global sepanjang aplikasi. Contoh berikut menggambarkan konsep ini:

`// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'  // Importing the Provider component from 'react-redux'
import { App } from './App'  // Importing the main App component
import createStore from './createReduxStore'  // Importing the function to create the Redux store

const store = createStore()  // Creating the Redux store using the createStore function

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))  // Creating a root element to render the React app
root.render(
  <Provider store={store}>  // Wrapping the App component with the Provider component and passing the Redux store as a prop
    <App />  // Rendering the main App component
  </Provider>
)`

The above code snippet initializes the Redux Store using the createStore function and then integrates it into the React application by wrapping the main App component with the Provider component. As a result, the Redux Store becomes accessible to all components of the application.

The entire state of the application is structured as a kind of JavaScript object tree within the Redux Store. As illustrated below:

`// Example of the structure of the store object
{
    noOfItemInCart: 2,  // Represents the total number of items in the cart
    cart: [  // Represents an array containing details of each item in the cart
        {
            bookName: "Harry Potter and the Chamber of Secrets",  // Name of the book
            noOfItem: 1,  // Quantity of this book in the cart
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",  // Name of another book
            noOfItem: 1  // Quantity of this book in the cart
        }
    ]
}`

In the above example, the Redux Store has two main features:

noOfItemInCart: Indicates the total number of items in the cart.
cart: An array containing objects, each representing a specific item in the cart. Each object includes properties such as bookName, which represents the name of the book, and noOfItem, which indicates the quantity of that book in the cart.
This structured representation enables efficient management and access to the application's state, facilitating seamless updates and interactions within the program.

What is an action in Redux?

Actions in Redux are essential for changing the application's state. They are JavaScript objects that describe what has happened in the application. As mentioned earlier, Redux enforces the idea of immutable state and prevents direct changes through views or network calls. Instead, any state changes must be communicated through actions.

Let's consider a scenario with a sample store containing two books, each with one copy. Now, imagine a user wants to add another item to their cart. They click on the "Add to Cart" button next to the desired item.

Upon clicking, a type of action is dispatched. This action, represented as a JavaScript object, reflects the necessary changes in the store. The following example illustrates this concept:

`const dispatch = useDispatch();

const addItemToCart = () => {
  return {
    type: "ADD_ITEM_TO_CART",
    payload: {
      bookName: "Harry Potter and the Goblet of Fire",
      noOfItem: 1,
    }
  };
};
<button onClick={() => dispatch(addItemToCart())}>Add to cart</button>`

In the above example, the addItemToCart function acts as an action creator. When called, it generates an action object that describes the intention to add a specific book to the cart. This action includes a type property indicating the type of action ("ADD_ITEM_TO_CART") and a payload containing the details of the book to be added.

This structured approach ensures transparency and consistency in state management, facilitating effective communication of state changes throughout the application.

For a better understanding of actions in Redux:

To better understand what actions are and what role they play in Redux, let's slightly complicate the previous example. In Redux, each action must have a type property that specifies the type of dispatched operation. While additional details can be included in the action object, they are optional and vary depending on the specific action being dispatched. For example, consider the action created by addItemToCart in the previous example:

`// Action created by the addItemToCart action creator

{
    type: "ADD_ITEM_TO_CART", // Note: Every action must have a type key
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
    }
}`

In the above example, the action type or action ADD_ITEM_TO_CART indicates the intention to add items to the cart. Additionally, the payload property contains specific details about the added item, such as its name and other relevant details.

What are Reducers in Reducers?

This uniform structure in managing actions ensures consistency and allows reducers to accurately interpret and process the dispatched actions. As a result, it facilitates effective state management in Redux.

Reducers in Redux are another essential part, but what exactly are reducers and what do they do? Reducers are essentially functions responsible for changing the application state based on dispatched actions. They adhere to the principle of immutability, meaning they don't directly alter the current state; instead, they return a new updated state.

In essence, reducers receive two parameters: the previous state and an action. They then process this information to indicate a new state representing the current state of the application.

In larger applications, there may be multiple reducers, each managing different parts or sections of the global state. For example, one reducer might manage the shopping cart state, while another handles user details.

When an action is dispatched, all reducers are called. Each reducer examines the action using a switch statement to identify its type. Upon finding a match, the corresponding reducer performs necessary updates to the state and returns a new instance of the global state.

For a better understanding of reducers in Redux:

To better grasp what reducers are and their role in Redux, let's consider the following example:

`const initialCartState = {   
    noOfItemInCart: 0,         
    cart: []                             
}

// NOTE:
// It is important to pass an initial state as default to
// the state parameter to handle the case of calling
// the reducers for the first time when the
// state might be undefined

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case "ADD_ITEM_TO_CART":
            return {
                ...state,
                noOfItemInCart: state.noOfItemInCart + 1,
                cart : [
                    ...state.cart,
                    action.payload
                ]
            }
        case "DELETE_ITEM_FROM_CART":
            return {
                // Remaining logic
            }
        default:
            return state 
    }       // Important to handle the default behaviour
}           // either by returning the whole state as it is
            // or by performing any required logic`

In the above example, we created a reducer called cartReducer, which is a JavaScript function. This function accepts two parameters.

Parameter keadaan mempunyai nilai lalai, initialCartState, supaya pengurang boleh mengendalikan senario di mana ia dipanggil buat kali pertama dengan keadaan tidak ditentukan. Setiap pengurang mesti mengendalikan keadaan lalai, di mana jika tiada jenis tindakan sepadan, ia mengembalikan keadaan semasa. Ini memastikan bahawa keadaan kekal tidak berubah sekiranya menghantar tindakan yang tidak berkaitan.

Apabila tindakan dihantar, pengurang yang sesuai dipanggil berdasarkan jenis tindakan. Dalam contoh kami, apabila butang "Tambah ke Troli" diklik, pencipta tindakan addItemToCart menghantar tindakan jenis ADD_ITEM_TO_CART.

Kemudian, cartReducer memproses tindakan ini dengan memadankan jenisnya. Jika ia sepadan dengan ADD_ITEM_TO_CART, ia mengemas kini keadaan dengan menambah nilai noOfItemInCart dan menambah item baharu pada tatasusunan troli dengan sewajarnya.

Adalah penting untuk ambil perhatian bahawa Redux menguatkuasakan ketidakbolehubah, jadi pengurang mencipta salinan baharu keadaan dengan perubahan yang diperlukan dan bukannya mengubah suai secara langsung keadaan sedia ada.

Selepas mengemas kini keadaan oleh pengurang, perubahan mencerminkan. Sebagai contoh, selepas menambah item baharu pada troli, keadaan dikemas kini termasuk nilai tambahan noOfItemInCart dan item yang baru ditambah dalam tatasusunan troli. Pendekatan berstruktur ini memastikan kemas kini keadaan yang boleh diramal dan mengekalkan konsistensi dalam mengurus keadaan dalam aplikasi Redux.

Pembelajaran Redux dan kepentingannya

Redux dipandu oleh tiga prinsip utama:

1. Pengurusan Negeri Berpusat: Keseluruhan keadaan aplikasi disimpan dalam stor tunggal berpusat, disusun dalam struktur seperti pokok yang unik.
3. Kemas Kini Negeri Didorong Tindakan: Perubahan keadaan dimulakan dengan menghantar tindakan, yang merupakan objek yang menerangkan perkara yang berlaku dalam aplikasi.
5. Transformasi Negeri melalui Pengurang: Pengurang menentukan cara pokok keadaan bertindak balas terhadap tindakan, memastikan kemas kini yang boleh diramal dan mengekalkan ketekalan keadaan.

Atas ialah kandungan terperinci Apakah Redux, dan bagaimana kita boleh menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!