Kit alat Redux lengkap (Bahagian-1)

Tujuan Redux Toolkit

Kami sudah mengetahui redux ialah perpustakaan pengurusan negeri yang berkuasa untuk aplikasi JavaScript kami, terutamanya apabila bekerja dengan React.
Tetapi bekerja dengan redux adalah sukar kerana kodnya yang berat untuk menyediakan redux. Yang menjadikannya sukar untuk diselenggara dan nyahpepijat. Di situlah Redux Toolkit datang untuk membantu.
Masalah Redux toolkit selesaikan

• Menyediakan kedai terlalu rumit.
• Menambahkan banyak pakej untuk berfungsi dengan redux cth., Middleware , alatan.
• Redux memerlukan terlalu banyak kod untuk disediakan

Kit alat Redux ialah cara rasmi dan disyorkan untuk menulis logik redux. Ia menyediakan satu set alatan untuk memudahkan pembangunan, mengurangkan kod boilerplate yang membantu menjadikan kebolehskalaan dan aplikasi boleh diselenggara.

Faedah utama Redux Toolkit:

1. Kurang kod plat dandang: Alih keluar keperluan untuk pencipta tindakan dan pemalar.
2. Persediaan kedai ringkas: Menyediakan API tunggal untuk mengkonfigurasi kedai dengan lalai yang wajar.
3. Sokongan terbina dalam untuk kebolehubahan dan DevTools: Mendayakan Redux DevTools secara automatik dan disepadukan dengan Immer untuk kebolehubahan.
4. Sokongan TypeScript yang lebih baik: Menyediakan penaipan yang lebih baik dan disepadukan dengan baik dengan TypeScript.

Kami boleh menggunakan redux toolkit dengan mana-mana pustaka javascript jadi kami menyediakan redux toolkit dengan react.

Menyediakan Redux Toolkit dalam Aplikasi React

Langkah 1: Buat Projek React Baharu

Mula-mula, mari buat aplikasi React baharu. Anda boleh menggunakan create-react-app atau Vite untuk tujuan ini. Kami akan menggunakan aplikasi create-react-di sini untuk kesederhanaan.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Langkah 2: Pasang Redux Toolkit dan React-Redux

Seterusnya, pasang pakej yang diperlukan: @reduxjs/toolkit dan react-redux.

npm install @reduxjs/toolkit react-redux

1. Memahami Slices dan Reducer

Sepotong ialah koleksi logik dan tindakan pengurang Redux untuk ciri khusus aplikasi anda. Redux Toolkit menyediakan fungsi createSlice untuk membantu mencipta kepingan keadaan dengan boilerplate minimum.

Langkah 1: Buat Slice
Mari buat kepingan kaunter yang mudah. Cipta fail baharu bernama counterSlice.js di dalam direktori ciri/kaunter:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Di sini, kami mentakrifkan hirisan bernama kaunter dengan keadaan awal dan tiga pengurang (kenaikan, penurunan dan kenaikanByAmount). Fungsi createSlice menjana pencipta tindakan secara automatik untuk setiap fungsi pengurang.

1. Mengkonfigurasi Kedai Redux

Sekarang kita mempunyai kepingan kita, mari kita konfigurasikan kedai Redux. Redux Toolkit menyediakan fungsi configureStore yang menyediakan kedai dengan lalai yang baik.

Langkah 1: Buat Kedai
Buat fail store.js di dalam direktori apl:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Langkah 2: Sediakan Kedai kepada Apl Anda
Balut aplikasi React anda dalam komponen dari react-redux dan hantarkannya ke kedai. Kemas kini fail index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

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

1. Menyambung Komponen ke Kedai

Untuk berinteraksi dengan kedai Redux, gunakan useSelector dan useDispatch cangkuk yang disediakan oleh react-redux.
Langkah 1: Akses Keadaan dengan useSelector
Gunakan cangkuk useSelector untuk mengakses keadaan daripada kedai

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

Langkah 2: Gunakan Komponen Kaunter dalam Apl Anda
Import dan gunakan komponen Kaunter dalam komponen Apl utama anda:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

1. Kesimpulan dan Langkah Seterusnya

Dalam bahagian ini, kami merangkumi asas menyediakan Redux Toolkit dalam aplikasi React, termasuk membuat kepingan, mengkonfigurasi kedai dan menyambungkan komponen ke kedai Redux menggunakan cangkuk. Dalam bahagian seterusnya, kami akan menyelam lebih mendalam dalam mengendalikan logik tak segerak dengan createAsyncThunk untuk mengambil data daripada API dan mengurus keadaan pemuatan yang berbeza.

Nantikan Bahagian 2: Kit Alat Redux Lanjutan - Logik Async dengan createAsyncThunk!

Atas ialah kandungan terperinci Kit alat Redux lengkap (Bahagian-1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!