Panduan untuk Redux: Perpustakaan Pengurusan Negeri yang Teguh untuk Aplikasi JavaScript

Redux diiktiraf secara meluas sebagai pustaka pengurusan negeri yang mantap yang direka khusus untuk aplikasi JavaScript, selalunya digunakan seiring dengan rangka kerja React yang popular. Dengan menawarkan bekas keadaan yang boleh dipercayai, Redux mewujudkan asas kukuh yang sangat memudahkan tugas mengendalikan dan menyelesaikan masalah keadaan aplikasi. Panduan ini menyelidiki secara mendalam komponen asas yang terdiri daripada Redux, memberikan penjelasan terperinci bagi setiap elemen dan menggambarkan cara ia saling beroperasi secara sinergi untuk menyelaraskan kefungsian keseluruhan aplikasi. Penerokaan mendalam ini bertujuan untuk menjelaskan kerja dalaman Redux, memperkasakan pembangun untuk memahami selok-belok alat pengurusan negeri ini dan memanfaatkan keupayaannya dengan berkesan dalam projek mereka.

Jadual Kandungan

1. Pengenalan kepada Redux
2. Menyediakan Redux dalam Aplikasi React
3. Tindakan dan Jenis Tindakan
4. Pengurang dan Hiris
5. Mengkonfigurasi Kedai
6. Menyambung Komponen Reaksi
7. Kesimpulan dan Rujukan

1. Pengenalan kepada Redux

Redux mengikut model aliran data satu arah dan berdasarkan tiga prinsip teras:

• Sumber kebenaran tunggal: Keadaan keseluruhan aplikasi anda disimpan dalam pokok objek dalam satu stor. Pemusatan ini memudahkan untuk nyahpepijat dan menjejaki perubahan merentas aplikasi anda.
• Keadaan adalah baca sahaja: Satu-satunya cara untuk menukar keadaan adalah dengan memancarkan tindakan, objek yang menerangkan perkara yang berlaku. Ini memastikan mutasi keadaan boleh diramal dan boleh dikesan.
• Perubahan dibuat dengan fungsi tulen: Untuk menentukan cara pepohon keadaan diubah melalui tindakan, anda menulis pengurang tulen. Fungsi tulen boleh diramal dan boleh diuji, yang memudahkan penyahpepijatan dan ujian unit.

2. Menyediakan Redux dalam Aplikasi React

Mula-mula, pasang Redux dan React-Redux:

npm install redux react-redux @reduxjs/toolkit

Arahan ini memasang pustaka Redux teras, pengikatan React untuk Redux dan Kit Alat Redux, yang memudahkan banyak tugas biasa seperti menyediakan kedai dan membuat kepingan.

3. Tindakan dan Jenis Tindakan

Tindakan ialah muatan maklumat yang menghantar data daripada aplikasi anda ke kedai Redux anda. Jenis tindakan ialah pemalar yang mewakili tindakan.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Menentukan tindakan dan jenis tindakan dengan jelas membantu mengekalkan konsistensi dan mengurangkan ralat dalam aplikasi anda.

4. Pengurang dan Hiris

Pengurang menentukan cara keadaan aplikasi berubah sebagai tindak balas kepada tindakan yang dihantar ke kedai. Slices ialah koleksi logik dan tindakan pengurang Redux untuk satu ciri apl anda, yang dibuat menggunakan kaedah createSlice Redux Toolkit.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number += 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number += action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

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

export default counterSlice.reducer;

Untuk menggabungkan berbilang kepingan:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Mengkonfigurasi Kedai

Stor ialah objek yang menyatukan tindakan dan pengurang. Ia memegang keadaan aplikasi, membenarkan akses kepadanya melalui getState(), mengemas kininya melalui penghantaran(tindakan) dan mendaftarkan pendengar melalui melanggan(pendengar).

kedai.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

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

export default store;

6. Menyambung Komponen Reaksi

Untuk menyambungkan komponen React ke kedai Redux, gunakan komponen Provider daripada react-redux untuk meneruskan kedai ke komponen anda dan gunakan useSelector dan useDispatch cangkuk untuk mengakses dan memanipulasi keadaan.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux Panduan untuk Redux: Perpustakaan Pengurusan Negeri yang Teguh untuk Aplikasi JavaScript.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Panduan untuk Redux: Perpustakaan Pengurusan Negeri yang Teguh untuk Aplikasi JavaScript" classname="w-40 mx-auto mt-24 rounded-full">
        <h1 classname="container m-auto text-2xl font-semibold text-center text-violet-700">
          Practice Redux with <span classname="font-extrabold text-violet-900">MusCo</span>
        </h1>
        <div classname="relative inline-block mt-8 text-sm">
          <counter></counter>
          <h5 classname="absolute bottom-0 right-0 mb-2 mr-2 font-semibold text-violet-700">
            <span classname="italic font-normal">by</span> 
            <span classname="font-semibold text-violet-900">Mus</span>tafa 
            <span classname="font-semibold text-violet-900">Coskuncelebi</span>
          </h5>
        </div>
      </div>
    </provider>
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      <h1 classname="mb-3 text-3xl font-bold mt-7 text-violet-700">Counter</h1>
      <p classname="text-5xl text-violet-900">{number}</p>
      <div classname="flex mx-8 space-x-5" style="{{" justifycontent:>
        <button onclick="{()"> dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        </button>
        <button onclick="{()"> dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        </button>
      </div>
      <div classname="flex mx-8 mt-5 space-x-3 mb-7" style="{{" justifycontent: alignitems:>
        <div classname="p-5 space-x-5 rounded-md outline outline-1 outline-violet-500">
          <input classname="w-40 h-10 pl-2 rounded-md outline outline-1 outline-violet-500 text-violet-900" onchange="{(e)"> {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
          <button onclick="{()"> {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          </button>
        </div>
      </div>
      <button onclick="{()"> {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      </button>
      <h3 classname="text-violet-400" id="showcase" style="{{" visibility: marginbottom:>
        Counter cannot be less than 0
      </h3>
    
  );
}

export default Counter;

7. Kesimpulan dan Rujukan

Redux ialah perpustakaan yang berkuasa untuk mengurus keadaan dalam aplikasi anda. Dengan memahami tindakan, pengurang, kedai dan cara menyambungkan segala-galanya kepada komponen React anda, anda boleh mencipta aplikasi yang boleh diramal dan diselenggara.

Perkara Utama:

• Tindakan: Tentukan perkara yang sepatutnya berlaku dalam apl anda.
• Pengurang: Tentukan cara keadaan berubah sebagai tindak balas kepada tindakan.
• Simpan: Memegang keadaan dan mengendalikan tindakan.
• Pembekal: Melewati kedai ke komponen React anda.

Untuk maklumat lanjut, lihat dokumentasi rasmi Redux:

• Dokumentasi Redux
• Dokumentasi Redux Toolkit
• Dokumentasi React-Redux

Dengan mengikuti panduan ini, anda seharusnya mempunyai pemahaman yang kukuh tentang Redux dan dapat melaksanakannya dalam aplikasi anda sendiri.

Atas ialah kandungan terperinci Panduan untuk Redux: Perpustakaan Pengurusan Negeri yang Teguh untuk Aplikasi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!