Det är lätt att TORKA i Redux! – Thành Đạt Võ – Medium

Det är lätt att TORKA i Redux!

Torrt med hjälp av solljus :))

Har du någonsin känt att du inte gör för mycket när du skriver redux? Regelbundet, när vi hämta ett api, vi har att hantera processen med 5 åtgärder:

start

Detta kallar åtgärden för att börja hämta från api

lyckas.

Om begäran lyckats (nr kasta fel), kalla detta

misslyckas

Om begäran misslyckades (kasta fel eller inte kan uppfylla), ring detta.

avbryt

på Något sätt, begäran är som ringer, men vi vet inte vad för att lyssna på resultatet (även framgång eller misslyckande), kallar detta för att ta bort lyssna

reset

Efter det att begäran görs redan, kallar denna för att återställa status från “framgång” eller “misslyckande” till “redo” för att återställa staten genom lyssnaren från en Komponent (som vi ofta att lyssna för att den rekvisita.status genom componentWillReceiveProps eller shouldComponentWillUpdate)

Wakumo Viet Nam, vi arbetar med mer än 100 saga att processen API för att hämta och mer i framtiden. Varje gång vi vill att begära för något, vi måste upprepa dessa fungerar:

Vi upprepa att skapa nästan samma actionTypes för varje önskemål: 'START_TO_FETCH_SOME_THING'
'SUCCEED_TO_SOME_THING'
'FAIL_TO_FETCH_SOME_THING'
'CLEAR_FETCHING_SOME_THING'
'RESET_FETCHING_SOME_THING'

< p namn=67e8>Vi upprepa att skapa nästan samma actionCreators för varje önskemål:
const startToFetchSomeThing = createAction(START_TO_FETCH_SOME_THING); const succeedToFetchSomeThing =createAction(SUCCEED_TO_FETCH_SOME_THING);
const failToFetchSomeThing = createAction(FAIL_TO_FETCH_SOME_THING); const clearFetchingSomeThing = createAction(CLEAR_FETCHING_SOME_THING); const resetToFetchSomeThing = createAction(RESET_TO_FETCH_SOME_THING);

Vi upprepa att skapa nästan samma reducering för varje önskemål:

const reducer = handleActions({
 START_TO_FETCH_SOME_THING: (stat, action) => ({...}),
 SUCCEED_TO_FETCH_SOME_THING: (stat, action) => ({...}),
 FAIL_TO_FETCH_SOME_THING: (stat, action) => ({...}),
 CLEAR_TO_FETCH_SOME_THING: (stat, action) => ({...}),
 RESET_TO_FETCH_SOME_THING: (stat, action) => ({...}),
}, initialState);

Funderar på att hantera ca 100 redux saga som detta kommer säkert att köra dig galen.

för det Första, låt oss dela upp insatser till grupper för att göra det enkelt att hantera, skapa groupActions.js


räkna>

Då, låt oss göra insatser från ovanstående struktur, kommer vi att använda funktionen för att skapa action från bibliotek “redux-åtgärder”:


räkna>

Då gör vi rot-reducering:


räkna>

Låt oss kalla det för i Containern:


räkna>


räkna>

Det är alla knep. Hoppas att ni tycker att det är praktiskt!

We will be happy to hear your thoughts

Leave a reply