Master Redux: Panduan Mudah untuk Pembangun React

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. Sepanjang panduan ini, kami akan 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

• Pengenalan kepada Redux

• Menyediakan Redux dalam Aplikasi React

• Tindakan dan Jenis Tindakan

• Pengurang dan Hiris

• Mengkonfigurasi Kedai

• Menyambung Komponen Reaksi

• 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 mengeluarkan 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 pasang 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 });

Mentakrifkan 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;

rootReducer.js

Untuk menggabungkan berbilang kepingan:

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).

store.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 Master Redux: Panduan Mudah untuk Pembangun React.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Master Redux: Panduan Mudah untuk Pembangun React" 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">Co</span>skuncelebi
          </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();
            }
            // Check the trimmed value consists only of digits
            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.

Isi Penting:

Tindakan: Tentukan perkara yang sepatutnya berlaku dalam apl anda.

Pengurang: Tentukan cara keadaan berubah sebagai tindak balas kepada tindakan.

Stor: Memegang keadaan dan mengendalikan tindakan.

Pembekal: Melewati kedai ke komponen React anda.

Fail Projek:

Di sini anda boleh mengakses fail projek yang disimpan dalam repositori GitHub saya.
redux-counter

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.

Selamat mengekod!

diterbitkan pada hashnode dan medium

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