Wie greife ich in React Redux auf den Store-Status zu?

Ich mache gerade eine einfache App, um Asynchronität mit Redux zu lernen. Ich habe alles zum Laufen gebracht, jetzt möchte ich nur noch den aktuellen Status auf der Webseite anzeigen. Wie greife ich nun in der Rendermethode auf den Status des Geschäfts zu?

Hier ist mein Code (alles ist auf einer Seite, weil ich gerade lerne):

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')
);

Also, in der Render-Methode des Status möchte ich alle item.titleaus dem Speicher auflisten.

Vielen Dank

Sie sollten eine separate Komponente erstellen, die Statusänderungen abhört und bei jeder Statusänderung aktualisiert:

import store from '../reducers/store';

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'));

Importieren connectvon react-reduxund verwenden Sie es, um die Komponente mit dem Status zu verbindenconnect(mapStates,mapDispatch)(component)

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


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

Schließlich müssen Sie die Zustände den Requisiten zuordnen, um mit ihnen darauf zugreifen zu können this.props

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

Nur die Staaten, die Sie zuordnen, sind über zugänglich props

Überprüfen Sie diese Antwort: https://stackoverflow.com/a/36214059/4040563

Weitere Informationen: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Sie müssen verwenden Store.getState(), um den aktuellen Status Ihres Shops abzurufen.

Weitere Informationen finden Sie getState()in diesem kurzen Video.

Sie möchten mehr als nur tun getState. Sie möchten auf Änderungen im Geschäft reagieren.

Wenn Sie React-Redux nicht verwenden, können Sie dies tun:

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

Besser ist es jedoch, React-Redux zu verwenden. In diesem Fall verwenden Sie den von Ihnen erwähnten Anbieter, verwenden dann jedoch connect , um Ihre Komponente mit dem Store zu verbinden.

Wenn Sie ein leistungsstarkes Debugging durchführen möchten, können Sie jede Änderung des Status abonnieren und die App anhalten, um zu sehen, was im Detail wie folgt vor sich geht.

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

Platzieren Sie das in der Datei, in der Sie es tun createStore.

stateGehen Sie folgendermaßen vor, um das Objekt von der Konsole in die Zwischenablage zu kopieren :

1. Klicken Sie mit der rechten Maustaste auf ein Objekt in der Chrome-Konsole und wählen Sie im Kontextmenü die Option Als globale Variable speichern. Es wird so etwas wie temp1 als Variablennamen zurückgegeben.

2. Chrome hat auch eine copy()Methode, daher copy(temp1)sollte dieses Objekt in der Konsole in Ihre Zwischenablage kopiert werden.

https://stackoverflow.com/a/25140576

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

Sie können das Objekt in einem JSON-Viewer wie diesem anzeigen: http://jsonviewer.stack.hu/

Sie können zwei json-Objekte hier vergleichen: http://www.jsondiff.com/