Cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks

Cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks

Kata Pengantar:

Dengan pembangunan berterusan teknologi bahagian hadapan, aplikasi bahagian hadapan menjadi semakin kompleks, dan pengurusan data telah menjadi semakin penting. React dan Redux merupakan rangka kerja bahagian hadapan yang popular pada masa ini dan ia boleh membantu kami mengurus dan mengemas kini data dengan berkesan. Artikel ini akan memperkenalkan cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks dan memberikan contoh kod khusus.

1. Pengenalan kepada React

React ialah perpustakaan JavaScript yang digunakan untuk membina antara muka pengguna. Ia membina UI yang boleh diguna semula melalui komponen. React menggunakan DOM maya untuk menjejaki perubahan halaman dan hanya mengemas kini bahagian yang perlu dikemas kini, meningkatkan prestasi pemaparan halaman.

2. Pengenalan kepada Redux

Redux ialah perpustakaan pengurusan negeri yang membolehkan kami mengurus keadaan aplikasi besar dengan lebih baik. Redux adalah berdasarkan seni bina Flux dan mengandungi tiga konsep teras: stor, tindakan dan pengurang. The Store menyimpan keadaan aplikasi, tindakan menerangkan perkara yang berlaku dan pengurang mentakrifkan cara mengemas kini keadaan.

3 Atur struktur kod Redux

Sebelum menggunakan Redux untuk mengurus data, kita perlu mengatur struktur kod terlebih dahulu. Secara umumnya, kita boleh menyusun kod mengikut fungsi atau domain. Sebagai contoh, letakkan semua kod berkaitan pengguna dalam direktori pengguna, dan letakkan semua kod berkaitan artikel dalam direktori artikel. Ini menjadikan struktur kod lebih jelas dan lebih mudah diselenggara.

4. Cipta Kedai Redux

Pertama, kita perlu buat kedai Redux. Dalam fail kemasukan aplikasi React, import pustaka redux dan react-redux dan buat kedai.

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Dalam kod di atas, fungsi createStore digunakan untuk mencipta kedai Kita perlu lulus dalam rootReducer, yang merupakan fungsi yang terdiri daripada berbilang pengurang.

5. Define Action

Action digunakan untuk menerangkan perkara yang berlaku. Ia adalah objek JavaScript biasa.

const addUser = user => ({
  type: 'ADD_USER',
  payload: user
});

Dalam kod di atas, kami mentakrifkan tindakan addUser, yang menerima objek pengguna dan mengembalikan objek yang mengandungi jenis dan muatan. jenis ialah rentetan yang digunakan untuk menerangkan jenis tindakan ini, dan muatan ialah muatan yang menyimpan data.

6. Define Reducer

Reducer digunakan untuk menentukan cara mengemas kini status. Dalam Redux, pengurang digunakan untuk mengubah suai data dalam stor.

const userReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [...state, action.payload];
    default:
      return state;
  }
};

export default userReducer;

Dalam kod di atas, kami mentakrifkan userReducer, yang menerima dua parameter: keadaan dan tindakan. keadaan ialah keadaan semasa, dan tindakan ialah objek tindakan yang diluluskan. Dalam pernyataan suis, cara mengemas kini status ditentukan berdasarkan jenis tindakan. Dalam kes ADD_USER, kami menggunakan operator spread ES6 untuk menambah pengguna baharu.

7. Sambungkan komponen Redux dan React

Kita perlu menggunakan fungsi sambung dalam perpustakaan react-redux untuk menyambungkan stor Redux ke komponen React.

import { connect } from 'react-redux';

const UserList = ({ users }) => (
  <div>
    {users.map(user => (
      <div key={user.id}>{user.name}</div>
    ))}
  </div>
);

const mapStateToProps = state => ({
  users: state.users
});

export default connect(mapStateToProps)(UserList);

Dalam kod di atas, kami mentakrifkan komponen UserList yang menerima tatasusunan pengguna dan memaparkan senarai. Gunakan fungsi sambung untuk memetakan pengguna di negeri itu kepada prop komponen.

8. Tindakan Pencetus

Untuk mencetuskan tindakan, kita boleh menggunakan kaedah penghantaran di kedai redux.

store.dispatch(addUser({ id: 1, name: 'John' }));

Dalam kod di atas, kami menggunakan kaedah store.dispatch untuk mencetuskan tindakan addUser dan menghantar objek pengguna.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks. Dengan mencipta stor Redux, mentakrifkan tindakan dan pengurang, serta menyambungkan stor dan komponen React, kami boleh mengurus dan mengemas kini data dengan lebih baik. Semasa proses pembangunan, anda boleh menyusun struktur kod mengikut keperluan sebenar dan menggunakan API kaya yang disediakan oleh Redux untuk memproses logik data yang kompleks. Saya harap artikel ini dapat membantu anda memahami dan menggunakan React dan Redux.

Atas ialah kandungan terperinci Cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!