Reaksi Moden dengan Redux

Artikel ini memfokuskan pada React moden dengan penekanan pada penyepaduan Redux ke dalam aplikasi React untuk pengurusan negeri. Saya akan merangkumi beberapa ciri React lanjutan seperti useCallback dan sambungan Kod VS yang berguna untuk meningkatkan produktiviti.

Sorotan Konsep:

1. mapStateToProps
2. mapDispatchToProps
3. Faedah menambah Redux ke React
4. Redux Thunk
5. Pengurang
6. Pemilih
7. React Coretan dalam Kod VS

1. mapStateToProps

Dalam Redux, mapStateToProps ialah fungsi yang membolehkan anda memetakan keadaan daripada stor Redux kepada prop komponen React. Ini membolehkan komponen mengakses bahagian tertentu keadaan.

Sintaks:

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

cth.) Dalam contoh ini, mapStateToProps mengekstrak nilai kiraan daripada gedung Redux dan menjadikannya tersedia sebagai prop dalam CounterComponent.

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2. mapDispatchToProps

Sama seperti mapStateToProps, mapDispatchToProps memetakan tindakan penghantaran ke prop, membolehkan komponen menghantar tindakan ke kedai Redux.

Sintaks:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

cth.) Dalam contoh ini, mapDispatchToProps menyediakan incrementCount sebagai prop kepada CounterComponent, membenarkannya menghantar tindakan increment() apabila dipanggil.

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. Faedah Menambah Redux untuk Bertindak balas

Redux boleh menambah baik aplikasi React anda dengan ketara, terutamanya apabila aplikasi semakin rumit. Berikut adalah faedah utama:

• Pengurusan Negeri Berpusat: Redux menyediakan satu sumber kebenaran dengan menguruskan negeri di kedai berpusat. Ini menjadikannya lebih mudah untuk mengurus perubahan keadaan merentas apl dan meningkatkan kebolehramalan.

• Nyatakan Kegigihan: Redux memudahkan untuk menyimpan dan mengekalkan keadaan merentas muat semula halaman atau laluan, menjadikan UX lebih lancar.

• Penyahpepijatan dan Penyahpepijatan Masa: Redux DevTools membenarkan penyahpepijatan lanjutan dan membolehkan anda memeriksa setiap tindakan dan perubahan keadaan, malah kembali ke keadaan sebelumnya untuk membetulkan pepijat.

• Pemisahan Kebimbangan: Redux memisahkan keadaan aplikasi anda daripada UI anda, membolehkan lebih banyak kod yang boleh digunakan semula, boleh diselenggara dan boleh diuji.

4. Redux Thunk

Redux Thunk ialah perisian tengah yang membenarkan untuk menulis pencipta tindakan yang mengembalikan fungsi dan bukannya objek tindakan. Ini membolehkan kami melakukan operasi tak segerak (seperti panggilan API) dalam tindakan Redux.

Sintaks:

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

cth.) Dalam contoh ini, fetchPosts ialah tindakan tak segerak yang mengambil data daripada API dan menghantar tindakan berdasarkan kejayaan atau kegagalan permintaan.

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. Pengurang

Reducers ialah fungsi tulen dalam Redux yang mengambil keadaan semasa dan tindakan sebagai hujah dan mengembalikan keadaan baharu berdasarkan tindakan. Reducer bertanggungjawab untuk mengemas kini keadaan di kedai Redux.

Sintaks:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

cth.) Dalam contoh ini, counterReducer mengendalikan dua tindakan, INCREMENT dan DECREMENT, dan mengemas kini kiraan dalam keadaan sewajarnya.

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

const store = createStore(rootReducer);

6. Pemilih

Pemilih ialah fungsi yang digunakan untuk mengekstrak atau mengira keadaan terbitan daripada gedung Redux. Mereka meningkatkan prestasi dengan menghafal hasil dan menyediakan API yang jelas untuk mengakses bahagian negeri.

Sintaks:

const selectCount = (state) => state.counter.count;

cth.) Dalam contoh ini, selectUserPosts ialah pemilih hafalan yang menapis siaran berdasarkan ID pengguna semasa. Pemilih boleh menjadikan kod anda lebih cekap dengan mengelakkan pengiraan semula yang tidak perlu.

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. Coretan Reaksi dalam Kod VS

Jika anda mengekod dalam Kod VS, memasang sambungan React Snippet boleh mempercepatkan aliran kerja anda. Sambungan ini menyediakan pintasan berguna untuk membuat komponen, cangkuk dan struktur kod React biasa yang lain, membantu pengguna menulis kod React yang bersih dan konsisten dengan lebih cepat dengan memanfaatkan templat kod.

cth.) Mencuba rfc, rafc atau rafce diikuti dengan kekunci tab akan menghasilkan kod berikut untuk komponen berfungsi React:

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

Atas ialah kandungan terperinci Reaksi Moden dengan Redux. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!