Comprensione di React-Redux e mapStateToProps ()

Sto cercando di capire il metodo connect di reagire-redux e le funzioni che assume come parametri. In particolare mapStateToProps().

Per come lo capisco, il valore di ritorno di mapStateToPropssarà un oggetto derivato dallo stato (come vive nel negozio), le cui chiavi verranno passate al componente di destinazione (a cui viene applicato il componente connessione) come oggetti di scena.

Ciò significa che lo stato consumato dal componente di destinazione può avere una struttura selvaggiamente diversa dallo stato in cui è archiviato nel negozio.

D: Va bene?
D: È previsto?
Q: È un anti-pattern?

Q: Is this ok?
A: si

D: Is this expected?
Sì, questo è previsto (se si utilizza la reattanza-redux).

Q: Is this an anti-pattern?
A: No, questo non è un anti-pattern.

Si chiama "connessione" del componente o "rendendolo intelligente". È di progettazione.

Ti consente di separare il componente dal tuo stato un'ulteriore volta, aumentando la modularità del codice. Inoltre, consente di semplificare lo stato del componente come sottoinsieme dello stato dell'applicazione che, di fatto, consente di conformarsi al modello Redux.

Pensaci in questo modo: un negozio dovrebbe contenere l' intero stato della tua applicazione.
Per applicazioni di grandi dimensioni, potrebbe contenere dozzine di proprietà nidificate a molti livelli di profondità.
Non vuoi trascinare tutto intorno ad ogni chiamata (costoso).

Senza mapStateToPropso qualche analogo di ciò, si sarebbe tentati di ritagliare il proprio stato in un altro modo per migliorare le prestazioni / semplificare.

Si è corretto. È solo una funzione di aiuto per avere un modo più semplice di accedere alle proprietà del tuo stato

Immagina di avere una postschiave nella tua appstate.posts

state.posts //
/*    
{
  currentPostId: "",
  isFetching: false,
  allPosts: {}
}
*/

E componente Posts

Per impostazione predefinita connect()(Posts), tutti i puntelli di stato renderanno disponibile per il componente collegato

const Posts = ({posts}) => (
  <div>
    {/* access posts.isFetching, access posts.allPosts */}
  </div> 
)

Ora, quando mappi il state.poststuo componente, diventa un po 'più bello

const Posts = ({isFetching, allPosts}) => (
  <div>
    {/* access isFetching, allPosts directly */}
  </div> 
)

connect(
  state => state.posts
)(Posts)

mapDispatchToProps

normalmente devi scrivere dispatch(anActionCreator())

con bindActionCreatorste puoi farlo anche più facilmente come

connect(
  state => state.posts,
  dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
)(Posts)

Ora puoi usarlo nel tuo componente

const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => (
  <div>
    <button onClick={() => fetchPosts()} />Fetch posts</button>
    {/* access isFetching, allPosts directly */}
  </div> 
)

Aggiornamento su actionCreators ..

Un esempio di actionCreator: deletePost

const deletePostAction = (id) => ({
  action: 'DELETE_POST',
  payload: { id },
})

Quindi, bindActionCreatorsprenderai semplicemente le tue azioni e le avvolgerai dispatch. (Non ho letto il codice sorgente di Redux, ma l'implementazione potrebbe essere simile a questa:

const bindActionCreators = (actions, dispatch) => {
  return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
    actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
    return actionsMap;
  }, {})
}

Hai ottenuto la prima parte giusta:

Sì mapStateToPropsha lo stato Store come argomento / parametro (fornito da react-redux::connect) e viene utilizzato per collegare il componente con una determinata parte dello stato del negozio.

Con il collegamento intendo che l'oggetto restituito mapStateToPropssarà fornito in fase di costruzione come oggetti di scena e qualsiasi modifica successiva sarà disponibile attraverso componentWillReceiveProps.

Se conosci il modello di progettazione di Observer è esattamente questa o una piccola variazione di esso.

Un esempio contribuirebbe a chiarire le cose:

import React, {
    Component,
} from 'react-native';

class ItemsContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: props.items, //provided by connect@mapStateToProps
            filteredItems: this.filterItems(props.items, props.filters),
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            filteredItems: this.filterItems(this.state.items, nextProps.filters),
        });
    }

    filterItems = (items, filters) => { /* return filtered list */ }

    render() {
        return (
            <View>
                // display the filtered items
            </View>
        );
    }
}

module.exports = connect(
    //mapStateToProps,
    (state) => ({
        items: state.App.Items.List,
        filters: state.App.Items.Filters,
        //the State.App & state.App.Items.List/Filters are reducers used as an example.
    })
    // mapDispatchToProps,  that's another subject
)(ItemsContainer);

Può esserci un altro componente di reazione chiamato itemsFiltersche gestisce il display e persiste lo stato del filtro nello stato di Redux Store, il componente Demo "ascolta" o "si abbona" ​​ai filtri di stato di Redux Store, quindi ogni volta che i filtri memorizzano lo stato (con l'aiuto di filtersComponent) reagire -redux rileva la presenza di una modifica e notifica o "pubblica" tutti i componenti in ascolto / sottoscritti inviando le modifiche alle loro componentWillReceivePropsche in questo esempio attiveranno un filtro degli elementi e aggiornerà il display a causa del fatto che lo stato di reazione è cambiato .

Fammi sapere se l'esempio è confuso o non abbastanza chiaro da fornire una spiegazione migliore.

Per quanto riguarda: Ciò significa che lo stato consumato dal componente di destinazione può avere una struttura selvaggiamente diversa dallo stato in cui è archiviato nel negozio.

Non ho ricevuto la domanda, ma so solo che lo stato di reazione ( this.setState) è totalmente diverso dallo stato di Redux Store!

Lo stato di reazione viene utilizzato per gestire il ridisegno e il comportamento del componente di reazione. Lo stato di reazione è contenuto esclusivamente nel componente.

Lo stato di Redux Store è una combinazione di stati di riduttori di Redux, ciascuno dei quali è responsabile della gestione di una piccola logica dell'app. Questi attributi dei riduttori sono accessibili con l'aiuto di react-redux::connect@mapStateToPropsqualsiasi componente! Ciò rende l'app accessibile dello stato del negozio Redux ampia mentre lo stato del componente è esclusivo di se stesso.

Questo esempio di reazione e redux si basa sull'esempio di Mohamed Mellouki. Ma convalida usando le regole di prettify e linting . Nota che definiamo i nostri oggetti di scena e i nostri metodi di spedizione usando PropTypes in modo che il nostro compilatore non ci urli. Questo esempio includeva anche alcune righe di codice che mancavano nell'esempio di Mohamed. Per usare connect dovrai importarlo da reagire-redux . Questo esempio anche lega i filterItems metodo ciò impedirà ambito problemi nel componente . Questo codice sorgente è stato formattato automaticamente utilizzando JavaScript Prettify .

import React, { Component } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class ItemsContainer extends Component {
  constructor(props) {
    super(props);
    const { items, filters } = props;
    this.state = {
      items,
      filteredItems: filterItems(items, filters),
    };
    this.filterItems = this.filterItems.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { itmes } = this.state;
    const { filters } = nextProps;
    this.setState({ filteredItems: filterItems(items, filters) });
  }

  filterItems = (items, filters) => {
    /* return filtered list */
  };

  render() {
    return <View>/*display the filtered items */</View>;
  }
}

/*
define dispatch methods in propTypes so that they are validated.
*/
ItemsContainer.propTypes = {
  items: PropTypes.array.isRequired,
  filters: PropTypes.array.isRequired,
  onMyAction: PropTypes.func.isRequired,
};

/*
map state to props
*/
const mapStateToProps = state => ({
  items: state.App.Items.List,
  filters: state.App.Items.Filters,
});

/*
connect dispatch to props so that you can call the methods from the active props scope.
The defined method `onMyAction` can be called in the scope of the componets props.
*/
const mapDispatchToProps = dispatch => ({
  onMyAction: value => {
    dispatch(() => console.log(`${value}`));
  },
});

/* clean way of setting up the connect. */
export default connect(mapStateToProps, mapDispatchToProps)(ItemsContainer);

Questo codice di esempio è un buon modello per un punto di partenza per il tuo componente.

React-Redux connect viene utilizzato per aggiornare l'archivio per ogni azione.

import { connect } from 'react-redux';

const AppContainer = connect(  
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppContainer;

È spiegato in modo molto semplice e chiaro in questo blog .

Puoi clonare il progetto github o copiare incollare il codice da quel blog per capire la connessione Redux.

Ecco un contorno / boilerplate per descrivere il comportamento di mapStateToProps :

(Questa è un'implementazione notevolmente semplificata di ciò che fa un contenitore Redux.)

class MyComponentContainer extends Component {
  mapStateToProps(state) {
    // this function is specific to this particular container
    return state.foo.bar;
  }

  render() {
    // This is how you get the current state from Redux,
    // and would be identical, no mater what mapStateToProps does
    const { state } = this.context.store.getState();

    const props = this.mapStateToProps(state);

    return <MyComponent {...this.props} {...props} />;
  }
}

e poi

function buildReduxContainer(ChildComponentClass, mapStateToProps) {
  return class Container extends Component {
    render() {
      const { state } = this.context.store.getState();

      const props = mapStateToProps(state);

      return <ChildComponentClass {...this.props} {...props} />;
    }
  }
}

import React from 'react';
import {connect} from 'react-redux';
import Userlist from './Userlist';

class Userdetails extends React.Component{

render(){
    return(
        <div>
            <p>Name : <span>{this.props.user.name}</span></p>
            <p>ID : <span>{this.props.user.id}</span></p>
            <p>Working : <span>{this.props.user.Working}</span></p>
            <p>Age : <span>{this.props.user.age}</span></p>
        </div>
    );
 }

}

 function mapStateToProps(state){  
  return {
    user:state.activeUser  
}

}

  export default connect(mapStateToProps, null)(Userdetails);