React-redux connect()'s mapStateToProps viene chiamato più volte nella navigazione react-router

Question

Ho un router semplice (avviato con redux-router e passato a react-router per eliminare le variabili).

<Router history={history}> 
    <Route component={Admin} path='/admin'> 
    <Route component={Pages} path='pages'/> 
    <Route component={Posts} path='posts'/> 
    </Route> 
</Router> 

Il componente di amministrazione è in pratica solo {this.props.children} con un po 'di navigazione; non è un componente di connect ed. componente

Pages è un componente connect ED con mapStateToProps() in questo modo:

function mapStateToProps (state) { 
    return { 
    pages: state.entities.pages 
    }; 
} 

messaggi è ancora più interessante:

function mapStateToProps (state) { 
    let posts = map(state.entities.posts, post => { 
    return { 
     ...post, 
     author: findWhere(state.entities.users, {_id: post.author}) 
    }; 
    } 

    return { 
    posts 
    }; 
} 

e poi quando ho caricare la pagina o passare messaggi/percorsi Pages Ottengo il seguente nel mio console.log().

// react-router navigate to /posts 

Admin render() 
posts: map state to props 
Posts render() 
posts: map state to props 
Posts render() 
posts: map state to props 

// react-router navigate to /pages 

Admin render() 
pages: map state to props 
Pages render() 
pages: map state to props 

Quindi la mia domanda è: perché è mapStateToProps viene chiamato più volte su cambiamenti di rotta?

Inoltre, perché una semplice funzione map in mapStateToProps causa che venga chiamata una terza volta nel contenitore Post?

Sto utilizzando i middleware di base logger e crashReporter dai documenti di Redux e non sta segnalando modifiche di stato o arresti anomali. Se lo stato non cambia, perché i componenti vengono visualizzati più volte?

Answer 1

Reselect consente di creare funzioni di selezione memoizzate per l'elaborazione dello stato derivato.

Redux's documentation spiega con un esempio come utilizzarlo. Anche i readme del repository hanno un rapido esempio.

Answer 2

Per esperienza con react-redux, non è necessario elaborare gli attributi del negozio all'interno di mapStateToProps perché connect uses shallow checking of bound store attributes to check for diff.

Per verificare se il componente deve essere aggiornato, react-redux chiama mapStateToProps e controlla gli attributi di primo livello del risultato. Se uno di questi viene modificato (controllo di uguaglianza ===), il componente si aggiorna con i nuovi oggetti di scena. Nella tua situazione posts cambia (map transform) ogni volta che mapStateToProps viene chiamato, quindi il tuo componente viene aggiornato ad ogni cambio di negozio!

La soluzione potrebbe essere quella di restituire solo riferimenti diretti degli attributi del vostro negozio:

function mapStateToProps (state) { 
    return { 
    posts: state.entities.posts, 
    users: state.entities.users 
    }; 
} 

Poi nel componente, è possibile definire una funzione che elabora i dati su richiesta:

getPostsWithAuthor() { 
    const { posts, users } = this.props; 

    return map(posts, post => { 
    return { 
     ...post, 
     author: findWhere(users, {_id: post.author}) 
    }; 
    }); 
}