Menggunakan Redux Toolkit dengan React: Panduan Mudah

Redux Toolkit ialah cara rasmi yang disyorkan untuk menulis logik Redux. Ia menyediakan lalai yang baik untuk persediaan kedai di luar kotak, dan termasuk tambahan Redux terbina dalam yang paling biasa digunakan. Dalam blog ini, kami akan membincangkan asas-asas penyepaduan Redux Toolkit dengan aplikasi React.

Apakah Redux Toolkit?

Redux Toolkit ialah satu set alatan yang membantu memudahkan proses menulis logik Redux. Ia termasuk utiliti untuk memudahkan kes penggunaan biasa seperti persediaan kedai, mencipta pengurang dan menulis logik kemas kini tidak berubah.

---

Menyediakan Redux Toolkit dengan React

Mari kita ikuti langkah-langkah untuk menyediakan Redux Toolkit dalam aplikasi React.

Langkah 1: Pasang Ketergantungan

Pertama, anda perlu memasang pakej yang diperlukan. Anda boleh melakukan ini menggunakan npm atau benang.

npm install @reduxjs/toolkit react-redux

Langkah 2: Buat Kedai Redux

Kedai ialah objek yang menghidupkan Redux. Dengan Redux Toolkit, anda boleh mencipta kedai menggunakan fungsi configureStore.

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

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

export default store;

Langkah 3: Buat Slice

Sepotong ialah koleksi logik dan tindakan pengurang Redux untuk satu ciri apl anda. Fungsi createSlice Redux Toolkit menjana pencipta tindakan dan jenis tindakan secara automatik.

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

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

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

export default counterSlice.reducer;

Langkah 4: Sediakan Kedai kepada Aplikasi React Anda

Untuk menjadikan kedai Redux tersedia kepada komponen React anda, anda perlu menggunakan komponen Provider daripada react-redux.

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

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

Langkah 5: Sambungkan Komponen React ke Redux Store

Untuk menyambungkan komponen React ke kedai Redux, anda boleh menggunakan useSelector dan useDispatch cangkuk dari react-redux.

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

function 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>
    </div>
  );
}

export default Counter;

Langkah 6: Gunakan Komponen Bersambung dalam Apl Anda

Akhir sekali, anda boleh menggunakan komponen yang disambungkan dalam aplikasi anda.

// src/App.js
import Counter from './components/Counter';

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

export default App;

---

Kesimpulan

Dengan mengikuti langkah ini, anda boleh menyediakan Redux Toolkit dalam aplikasi React anda untuk mengurus keadaan dengan cara yang boleh diramal dan diselenggara. Redux Toolkit memudahkan banyak tugas biasa apabila bekerja dengan Redux, menjadikannya lebih mudah untuk menulis dan mengekalkan logik Redux anda.

---

Penerokaan Selanjutnya

Bagi mereka yang ingin mendalami Redux Toolkit dan React, berikut ialah beberapa sumber berharga:

• Dokumentasi Kit Alat Redux: Dokumentasi rasmi menyediakan panduan komprehensif dan rujukan API.
  • Dokumentasi Redux Toolkit
• Dokumentasi React Redux: Ketahui lebih lanjut tentang cara menggunakan Redux dengan React.
  • Dokumentasi React Redux
• Tutorial Redux Essentials: Tutorial langkah demi langkah untuk membantu anda menggunakan Redux Toolkit.
  • Tutorial Redux Essentials
• Tutorial Asas Redux: Tutorial terperinci yang merangkumi konsep teras Redux.
  • Tutorial Asas Redux

Terima kasih kerana membaca!
Po.

Atas ialah kandungan terperinci Menggunakan Redux Toolkit dengan React: Panduan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!