Redux - C'è un modo per accedere all'albero del negozio nel riduttore?

Question

Nel mio caso, ho un negozio come:

{ 
    aa: {...}, 
    bb: cc // the result of computing with aa 
} 

devo aggiornare aa e bb, allo stesso tempo, ma bb bisogno di ottenere l'ultimo calcolo di aa.

Ecco il codice (React.js):

onClick(e) { 
    const { dispatch, aa, bb } = this.props; 

    dispatch(updateAa()); 
    dispatch(updateBb(aa)); // can not get the latest computation of aa, it is the last computation.. 
} 

Quindi, è questo significa che ho bisogno di ottenere aa in riduttore bb s'?

E come posso farlo?

Speranza per gli aiuti !, Grazie!

Answer 1

Ci sono diverse possibilità, ma è difficile dire quale sia il migliore, data la vaghezza del codice.

• Idealmente, your store should be normalized, il che significa che ogni parte di dati è disponibile solo in un unico luogo. Quindi calcoli i dati derivati ​​dopo leggendo il negozio, ad esempio quando si utilizza lo selector pattern descritto nella guida per mappare lo stato del negozio a ciò che si potrebbe considerare una vista materializzata che verrà inviata ai componenti come props. In questo flusso di lavoro, aa e bb sarebbero prodotti da funzioni di selezione, anziché memorizzati in tale archivio.
• Si potrebbe lasciare il riduttore che aggiorna aa e bb al di fuori di combineReducers, in modo che si vede tutto lo stato, piuttosto che lo Stato ambito verso il basso per aa e bb.
• È possibile calcolare il codice di calcolo in un helper che può essere chiamato da updateAa e updateBb e trasmettere informazioni sufficienti in ciascuna azione per effettuare il calcolo.
• È possibile calcolare l'aggiornamento prima della spedizione, in modo che l'azione contenga il valore corretto.

Answer 2

Chiediti se hai strutturato correttamente i riduttori. Se a e b non sono indipendenti l'uno dall'altro, perché sono dei riduttori separati? Vorrei provare a unirli in un unico riduttore.

Answer 3

non usano combineReducers.

Esempio

sostituire questo codice

export const a = combineReducers({ 
    app, 
    posts, 
    intl, 
    products, 
    pos, 
    cats, 
}); 

con

export default (state = {}, action) => { 
    return { 
    app: app(state.app, action, state), 
    posts: posts(state.posts, action, state), 
    intl: intl(state.intl, action, state), 
    products: products(state.products, action, state), 
    pos: pos(state.pos, action, state), 
    cats: cats(state.cats, action, state), 
    }; 
}; 

riduttore sarebbe come

const reducer = (state = initialState, action, root) => {....} 

Answer 4

Come diceva David L. Walsh, probabilmente dovresti strutturare i riduttori in modo più logico.

MA Se pensi ancora di averne bisogno, puoi utilizzare un middleware thunk. (https://github.com/gaearon/redux-thunk) Redux Thunk middleware consente di scrivere creatori di azioni che restituiscono una funzione anziché un'azione.

Redux Thunk offre un modo per leggere lo stato corrente del negozio Redux. Oltre alla spedizione, passa anche getState come secondo argomento alla funzione che si restituisce dal creatore di azione thunk.

export function action() { 
    return function(dispatch, getState){ 
     const state = getState() 
     dispatch({ 
      type: "ACTION_WITH_SOME_PART_OF_STATE, 
      some_part_of_state: state.some_part 
     }) 
    } 
}