Untuk apa react-redux digunakan?

Fungsi "react-redux": 1. Bahagikan komponen kepada komponen kontena dan komponen UI 2. Gantikan "store.subscribe" dalam redux untuk memantau perubahan keadaan komponen dan menggunakannya untuk menghasilkan komponen; 3. Digunakan dengan redux, komponen boleh memperoleh status global dengan mudah dan memudahkan komunikasi antara komponen.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah kegunaan react-redux

React-redux digunakan dengan redux untuk menyuntik data stor yang ditakrifkan oleh redux ke dalam komponen, yang membolehkan komponen memperoleh keadaan global dengan mudah dan memudahkan komunikasi antara komponen. Sambungkan pakej tindak balas dengan pusat data redux (kedai) Selepas memanggil fungsi penghantaran untuk mengubah suai status data, logik pemprosesan mengemas kini paparan melalui pendaftaran langganan dicetuskan, termasuk data yang perlu diberikan dan fungsi yang mengemas kini data tersebut.

Ia digunakan terutamanya untuk membalut komponen yang memerlukan Redux di pintu masuk. Pada asasnya, kedai dimasukkan ke dalam konteks.

Oleh kerana gandingan antara redux dan komponen terlalu tinggi, redux direka bentuk untuk memisahkannya. Sebaik sahaja kami memperkenalkan react-redux, kami tidak perlu lagi menggunakan langganan kedai untuk melanggan negeri itu sendiri. Komponen UI sama seperti komponen biasa tanpa redux di dalamnya. Lebih boleh dibaca.

Fungsi 1

Membahagikan komponen kepada komponen kontena dan komponen UI mendapatkan status dan status operasi melalui kaedah prop.

Fungsi 2

Gunakan komponen Pembekal untuk menggantikan kedai.langgan dalam redux untuk memantau perubahan keadaan komponen dan gunakannya untuk memaparkan komponen.

Fungsi 3

Sambungkan komponen UI dan redux melalui sambungan API teras dalam komponen kontena ialah fungsi tertib tinggi, dan parameter pertama menerima dua Fungsi panggil balik, fungsi panggil balik 1: akan menerima keadaan, dan kemudian mengembalikan objek objek yang mengandungi keadaan komponen UI yang dikehendaki. Fungsi panggil balik 2: menerima penghantaran dan mengembalikan objek, yang mengandungi kaedah mengendalikan keadaan komponen UI. Terdapat juga kaedah trengkas, iaitu menghantar parameter kedua terus ke objek, yang mengandungi kaedah untuk status operasi. (Teras: keadaan pemetaan dan penghantaran ke prop komponen UI)

Kod teras

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)

Berikut ialah singkatan

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

Pembelajaran yang disyorkan: " tutorial video reaksi》

Atas ialah kandungan terperinci Untuk apa react-redux digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!