Comment accéder à l'état du magasin dans React Redux?

Question

Je suis en train de créer une application simple pour apprendre async avec Redux. J'ai tout fait fonctionner, maintenant je veux juste afficher l'état actuel sur la page Web. Maintenant, comment puis-je accéder à l'état du magasin dans la méthode de rendu?

Voici mon code (tout est dans une page parce que je viens d'apprendre):

 const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

render(
    <Provider store={store}>
        <div>
            { this.props.items.map((item) => <p> {item.title} </p> )}
        </div>
    </Provider>,
    document.getElementById('app')
);
 

Donc, dans la méthode de rendu de l'état, je veux lister tous les item.title du magasin.

Merci

Answer 1

Vous devez créer un composant distinct, qui écoutera les changements d'état et se mettra à jour à chaque changement d'état:

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

    this.state = {
      items: [],
    };

    store.subscribe(() => {
      // When state will be updated(in our case, when items will be fetched), 
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        items: store.getState().items;
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item) => <p> {item.title} </p> )}
      </div>
    );
  }
};

render(<Items />, document.getElementById('app'));
 

Answer 2

Importer connect de react-redux et l'utiliser pour connecter le composant à l'état connect(mapStates,mapDispatch)(component)

import React from "react";
import { connect } from "react-redux";


const MyComponent = (props) => {
    return (
      <div>
        <h1>{props.title}</h1>
      </div>
    );
  }
}

Enfin, vous devez mapper les états d'accessoires pour l'accès avec this.props

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

Seuls les états que vous avez la carte sera accessible via props

Découvrez cette réponse: https://stackoverflow.com/a/36214059/4040563

Pour davantage de lecture : https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Answer 3

Vous devez utiliser Store.getState() pour connaître l'état actuel de votre boutique.

Pour plus d'informations sur getState() regardez cette courte vidéo.

Answer 4

Vous voulez faire plus que getState . Vous voulez réagir aux changements dans le magasin.

Si vous n'utilisez pas react-redux, vous pouvez faire ceci:

 function rerender() {
    const state = store.getState();
    render(
        <div>
            { state.items.map((item) => <p> {item.title} </p> )}
        </div>,
        document.getElementById('app')
    );
}

// subscribe to store
store.subscribe(rerender);

// do initial render
rerender();

// dispatch more actions and view will update
 

Mais mieux vaut utiliser react-redux. Dans ce cas, vous utilisez le fournisseur comme vous l'avez mentionné, mais vous utilisez ensuite connect pour connecter votre composant au magasin.

Answer 5

Si vous voulez faire un peu de puissance élevée de débogage, vous pouvez vous abonner à chaque changement de l'état et de mettre en pause l'application pour voir ce qu'il se passe en détail comme suit.

store.js

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

Le placer que dans le fichier où vous ne createStore.

Pour copier l' state objet à partir de la console dans le presse-papiers, suivez ces étapes:

1. Droit-cliquez sur un objet dans la console de Chrome et sélectionnez enregistrer en tant que Variable Globale dans le menu contextuel. Il sera de retour quelque chose comme temp1 le nom de la variable.

2. Chrome a aussi un copy() méthode, copy(temp1) dans la console devrait copie de l'objet dans le presse-papiers.

https://stackoverflow.com/a/25140576

https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

Vous pouvez afficher l'objet en json viewer comme celui-ci: http://jsonviewer.stack.hu/

Vous pouvez comparer deux objets json ici: http://www.jsondiff.com/