2016-06-12 21 views
29

Come accedere allo stato di ridondanza all'interno di una funzione saga?Come ottenere qualcosa dallo stato/dal negozio all'interno di una funzione di saga di redux?

mio problema

Ho un'applicazione costituito dalle seguenti parti:

  TOOLBAR   
--------------------------------- 
User info  | Current Project 

Ogni parte è un componente diverso con il proprio riduttore, saga, le azioni e lo stato.

La barra degli strumenti ha un pulsante di salvataggio che invia un tipo di azione "SAVE_PROJECT". Il problema è che non voglio che la barra degli strumenti conosca il progetto (ha più responsabilità e voglio solo che invii azioni con il tipo).

Ho una saga necessaria ai progetti, che ascolta il "SAVE_PROJECT":

... 
export function* saveProjectTask() { 
    while(true) { 
    yield take(SAVE_PROJECT); 
    let project = /* THIS IS THE PROBLEM, I DON'T HAVE THE PROJECT */; 
    yield call(fetch, '/api/project', { body: project, method: 'PUT' }); 
    yield put({type: SAVE_PROJECT_SUCCESS}); 
    } 
} 

non riesco a ottenere il progetto da parte dello Stato Redux all'interno della saga.

Non penso di poter ascoltare l'evento "SAVE_PROJECT" all'interno del riduttore del progetto curren e quindi all'interno del riduttore ottenere il progetto e inviare un'azione diversa con il progetto.

Io davvero non voglio che la mia barra degli strumenti conosca l'intero albero di stato e invii tutto ciò che è relativo all'azione per ogni azione.

Come posso passare lo stato stesso alla saga? O solo la parte rilevante dello stato?

risposta

74

Come @markerikson dice già, redux-saga espone un utilissimo API select() di invocare una selector sullo stato per ottenere una parte di esso a disposizione all'interno della saga.

Per esempio, una semplice implementazione potrebbe essere:

/* 
* Selector. The query depends by the state shape 
*/ 
export const getProject = (state) => state.project 

// Saga 
export function* saveProjectTask() { 
    while(true) { 
    yield take(SAVE_PROJECT); 
    let project = yield select(getProject); // <-- get the project 
    yield call(fetch, '/api/project', { body: project, method: 'PUT' }); 
    yield put({type: SAVE_PROJECT_SUCCESS}); 
    } 
} 

Oltre alla suggerito doc da @markerikson, c'è un ottimo video tutorial di D. Abramov, che spiega come utilizzare selectors con Redux. Controlla anche this thread interessanti su Twitter.

+2

Esattamente quello che volevo .. Non posso credere di averlo perso –

9

Ecco a cosa servono le funzioni "selettore". Passi loro l'intero albero statale e loro restituiscono un pezzo dello stato. Il codice che chiama il selettore non ha bisogno di sapere dove nello stato in cui si trovavano i dati, solo che è stato restituito. Vedi http://redux.js.org/docs/recipes/ComputingDerivedData.html per alcuni esempi.

All'interno di una saga, il select() API può essere utilizzato per eseguire un selettore.

Problemi correlati