Apakah tindakan redux? Bagaimana anda menghantarnya?

Apakah tindakan redux? Bagaimana anda menghantarnya?

Tindakan Redux adalah objek JavaScript biasa yang mewakili niat untuk mengubah keadaan permohonan. Mereka berfungsi sebagai satu -satunya cara untuk mencetuskan perubahan di kedai Redux. Tindakan biasanya mengandungi medan type yang menunjukkan jenis tindakan yang dilakukan, bersama -sama dengan data lain yang berkaitan (sering dirujuk sebagai payload ).

Untuk menghantar tindakan, anda menggunakan fungsi dispatch yang disediakan oleh kedai Redux. Proses ini boleh dipecah menjadi langkah berikut:

1. Buat tindakan : Anda membuat objek tindakan dengan type yang sesuai dan apa -apa payload yang diperlukan.
2. Menghantar tindakan : Anda memanggil fungsi dispatch , lulus dalam objek tindakan. Ini menghantar tindakan ke kedai Redux, yang kemudiannya akan melalui pengurangan untuk mengemas kini keadaan.

Inilah contoh asas:

 <code class="javascript">// Action Creator function incrementCounter() { return { type: 'INCREMENT_COUNTER', payload: 1 }; } // Dispatching the action store.dispatch(incrementCounter());</code>

Dalam contoh ini, incrementCounter adalah pencipta tindakan yang mengembalikan objek tindakan. Tindakan itu kemudiannya dihantar ke kedai menggunakan store.dispatch .

Apakah struktur tindakan redux?

Struktur tindakan redux adalah mudah tetapi penting untuk difahami. Objek tindakan Redux biasa mempunyai struktur berikut:

• Jenis : (Diperlukan) Rentetan yang menerangkan tindakan. Ia adalah konvensyen untuk menggunakan pemalar huruf besar untuk jenis tindakan untuk mengelakkan kesilapan dan membuat kod lebih banyak dipelihara.
• Payload : (Pilihan) Data tambahan yang diperlukan untuk tindakan tersebut. Ia sering digunakan untuk membawa data yang diperlukan untuk mengemas kini keadaan.
• Ralat : (Pilihan) Boolean yang menunjukkan sama ada tindakan mewakili ralat.
• META : (Pilihan) Maklumat tambahan mengenai tindakan yang bukan sebahagian daripada muatan.

Berikut adalah contoh struktur tindakan biasa:

 <code class="javascript">{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' }, error: false, meta: { timestamp: new Date().getTime() } }</code>

Bagaimanakah anda boleh menggunakan Redux Thunk untuk menghantar tindakan tidak segerak?

Redux Thunk adalah middleware yang membolehkan anda menulis pencipta tindakan yang mengembalikan fungsi dan bukannya objek tindakan. Fungsi -fungsi ini boleh mempunyai kesan sampingan, seperti membuat panggilan API tak segerak, dan boleh menghantar pelbagai tindakan dari masa ke masa.

Berikut adalah cara anda boleh menggunakan Redux Thunk untuk menghantar tindakan tidak segerak:

1. Pasang Redux Thunk : Pertama, anda perlu memasang Redux Thunk.

    <code class="bash">npm install redux-thunk</code>

2. Sediakan Redux Thunk : Sertakan Redux Thunk di middleware kedai anda.

    <code class="javascript">import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));</code>

3. Buat Pencipta Tindakan Async : Tulis pencipta tindakan yang mengembalikan fungsi. Fungsi ini boleh menghantar tindakan dan menggunakan setTimeout , fetch , atau operasi tak segerak yang lain.

    <code class="javascript">function fetchTodos() { return async (dispatch) => { dispatch({ type: 'FETCH_TODOS_REQUEST' }); try { const response = await fetch('https://example.com/api/todos'); const data = await response.json(); dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_TODOS_FAILURE', error: error.message }); } }; }</code>

4. Menghantar tindakan async : Anda kini boleh menghantar tindakan async seperti tindakan biasa.

    <code class="javascript">store.dispatch(fetchTodos());</code>

Dalam contoh ini, fetchTodos adalah pencipta tindakan async yang menghantar tindakan yang berbeza pada peringkat yang berlainan dalam operasi tak segerak.

Apakah beberapa amalan terbaik untuk menguruskan jenis tindakan di Redux?

Menguruskan jenis tindakan di Redux dengan berkesan adalah penting untuk mengekalkan aplikasi berskala dan diselenggarakan. Berikut adalah beberapa amalan terbaik:

1. Gunakan pemalar untuk jenis tindakan : Tentukan jenis tindakan sebagai pemalar dalam fail berasingan. Ini membantu mencegah kesilapan dan menjadikannya lebih mudah untuk mengekalkan jenis tindakan di seluruh aplikasi.

    <code class="javascript">// actionTypes.js export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';</code>

2. Mengatur jenis tindakan mengikut domain : jenis tindakan kumpulan oleh domain yang mereka milik. Ini membantu dalam menguruskan sejumlah besar jenis tindakan.

    <code class="javascript">// counterActionTypes.js export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; export const DECREMENT_COUNTER = 'DECREMENT_COUNTER'; // userActionTypes.js export const LOGIN_USER = 'LOGIN_USER'; export const LOGOUT_USER = 'LOGOUT_USER';</code>

3. Gunakan pencipta tindakan : Gunakan pencipta tindakan untuk menjana tindakan. Ini mengurangkan peluang kesilapan dan menjadikan kod lebih banyak boleh diguna semula.

    <code class="javascript">// actions.js import { INCREMENT_COUNTER } from './actionTypes'; export function incrementCounter() { return { type: INCREMENT_COUNTER, payload: 1 }; }</code>

4. Ikuti konvensyen penamaan : Gunakan konvensyen penamaan yang konsisten untuk jenis tindakan anda. Amalan biasa ialah menggunakan huruf besar_case.
5. Elakkan jenis tindakan bertindih : Pastikan jenis tindakan adalah unik untuk mengelakkan tingkah laku yang tidak diingini. Jika anda mempunyai beberapa pengurangan, pastikan jenis tindakan berbeza atau gunakan ruang nama.
6. Gunakan muatan tindakan dengan bijak : Pastikan muatan tindakan bersandar dan memberi tumpuan kepada apa yang diperlukan untuk mengemas kini keadaan. Elakkan termasuk data yang tidak perlu dalam muatan.
7. Pertimbangkan menggunakan Flux Standard Action (FSA) : Ikuti format tindakan standard fluks untuk konsistensi dan kebolehprediksi. FSA menentukan bahawa tindakan harus mempunyai medan type dan mungkin mempunyai payload , error , atau meta .

Dengan mengikuti amalan terbaik ini, anda boleh menguruskan jenis tindakan dengan berkesan di Redux, menghasilkan kod yang lebih bersih dan lebih diselenggara.

Atas ialah kandungan terperinci Apakah tindakan redux? Bagaimana anda menghantarnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!