Redux - Integrasikan React

Di bab-bab sebelumnya, kita telah mempelajari apa itu Redux dan cara kerjanya. Sekarang mari kita periksa integrasi bagian tampilan dengan Redux. Anda dapat menambahkan lapisan tampilan apa pun ke Redux. Kami juga akan membahas perpustakaan react dan Redux.

Katakanlah jika berbagai komponen react perlu menampilkan data yang sama dengan cara berbeda tanpa meneruskannya sebagai prop ke semua komponen dari komponen tingkat atas ke bawah. Akan sangat ideal untuk menyimpannya di luar komponen react. Karena ini membantu pengambilan data lebih cepat karena Anda tidak perlu meneruskan data sepenuhnya ke berbagai komponen.

Mari kita bahas bagaimana mungkin dengan Redux. Redux menyediakan paket react-redux untuk mengikat komponen react dengan dua utilitas seperti yang diberikan di bawah ini -

  • Provider
  • Connect

Penyedia membuat toko tersedia untuk aplikasi lainnya. Fungsi Connect membantu bereaksi komponen untuk menghubungkan ke toko, menanggapi setiap perubahan yang terjadi di negara bagian toko.

Mari kita lihat root index.js file yang membuat penyimpanan dan menggunakan penyedia yang memungkinkan penyimpanan ke seluruh aplikasi dalam aplikasi react-redux.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';
import App from './components/app'
import './index.css';

const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
   applyMiddleware(thunk)
)
render(
   <Provider store = {store}>
      <App />
   </Provider>,
   document.getElementById('root')
)

Setiap kali perubahan terjadi dalam aplikasi react-redux, mapStateToProps () dipanggil. Dalam fungsi ini, kami secara tepat menentukan status mana yang perlu kami sediakan untuk komponen react kami.

Dengan bantuan fungsi connect () yang dijelaskan di bawah ini, kami menghubungkan status aplikasi ini untuk mereaksi komponen. Connect () adalah fungsi orde tinggi yang mengambil komponen sebagai parameter. Ini melakukan operasi tertentu dan mengembalikan komponen baru dengan data yang benar yang akhirnya kami ekspor.

Dengan bantuan mapStateToProps (), kami menyediakan status penyimpanan ini sebagai prop untuk komponen react kami. Kode ini dapat dibungkus dalam komponen kontainer. Motifnya adalah untuk memisahkan masalah seperti pengambilan data, memberikan kekhawatiran, dan dapat digunakan kembali.

import { connect } from 'react-redux'
import Listing from '../components/listing/Listing' //react component
import makeApiCall from '../services/services' //component to make api call

const mapStateToProps = (state) => {
   return {
      items: state.items,
      isLoading: state.isLoading
   };
};
const mapDispatchToProps = (dispatch) => {
   return {
      fetchData: () => dispatch(makeApiCall())
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Listing);

Definisi komponen untuk membuat panggilan api di file services.js adalah sebagai berikut -

import axios from 'axios'
import { itemsLoading, itemsFetchDataSuccess } from '../actions/actions'

export default function makeApiCall() {
   return (dispatch) => {
      dispatch(itemsLoading(true));
      axios.get('http://api.tvmaze.com/shows')
      .then((response) => {
         if (response.status !== 200) {
            throw Error(response.statusText);
         }
         dispatch(itemsLoading(false));
         return response;
      })
      .then((response) => dispatch(itemsFetchDataSuccess(response.data)))
   };
}

Fungsi mapDispatchToProps () menerima fungsi dispatch sebagai parameter dan mengembalikan Anda callback props sebagai objek biasa yang Anda berikan ke komponen react Anda.

Di sini, Anda dapat mengakses fetchData sebagai prop di komponen daftar reaksi Anda, yang mengirimkan tindakan untuk melakukan panggilan API. mapDispatchToProps () digunakan untuk mengirimkan tindakan untuk disimpan. Dalam react-redux, komponen tidak dapat mengakses penyimpanan secara langsung. Satu-satunya cara adalah dengan menggunakan connect ().

Mari kita pahami cara kerja react-redux melalui diagram di bawah ini -

STORE - Menyimpan semua status aplikasi Anda sebagai objek JavaScript

PROVIDER - Membuat toko tersedia

CONTAINER - Dapatkan status aplikasi & berikan sebagai penyangga komponen

COMPONENT - Pengguna berinteraksi melalui komponen tampilan

ACTIONS - Menyebabkan perubahan di toko, mungkin atau mungkin tidak mengubah status aplikasi Anda

REDUCER - Satu-satunya cara untuk mengubah status aplikasi, menerima status dan tindakan, dan mengembalikan status yang diperbarui.

Namun, Redux adalah pustaka independen dan dapat digunakan dengan lapisan UI apa pun. React-redux adalah Redux resmi, UI mengikat dengan react. Selain itu, ini mendorong struktur aplikasi Redux bereaksi yang baik. React-redux secara internal mengimplementasikan pengoptimalan kinerja, sehingga rendering ulang komponen hanya terjadi jika diperlukan.

Singkatnya, Redux tidak dirancang untuk menulis kode terpendek dan tercepat. Ini dimaksudkan untuk menyediakan wadah pengelolaan keadaan yang dapat diprediksi. Ini membantu kami memahami kapan keadaan tertentu berubah, atau dari mana data berasal.