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.title
aus dem Speicher auflisten.
Vielen Dank
javascript
asynchronous
reactjs
redux
react-redux
Parkizismus
quelle
quelle
react-redux
Bibliothek eine mit dem Geschäft verbundene Komponente erstellen . Ich empfehle Ihnen dringend, Ihr Verständnis von Redux mit dem kostenlosen Kurs des Autors zu verbessernstore.getState()
, um den Status tatsächlich aus Ihrem Geschäft zu lesen. redux.js.org/docs/api/Store.html#getStateAntworten:
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'));
quelle
store
Variable definiert?store
Variable - Es handelt sich um eine Redux-Store-Instanz.store
Übersichtlichkeit sollten Sie den Import einschließen .import store from '../reducers/store';
. undstore.js
würde enthaltenconst createStoreWithMiddleware = applyMiddleware(thunkMiddleware,promise)(createStore); export default createStoreWithMiddleware(reducers);
Importieren
connect
vonreact-redux
und 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
quelle
mapDispatchToProps
) aufzurufen . Wenn Sie versuchen, das zu erhalten, was sich bereits im Geschäft befindet, ohne einen weiteren Abrufzyklus auszulösen, müssen Sie entwedersubscribe
odergetState
auf dem verwendenstore
.Sie müssen verwenden
Store.getState()
, um den aktuellen Status Ihres Shops abzurufen.Weitere Informationen finden Sie
getState()
in diesem kurzen Video.quelle
this.props.items
zustore.getState().items
? Wenn ich es getan habe, gibt es das nicht ausitem.title
.let store = createStore(todoApp);
inindex.js
und ich möchte auf dasstore
Innere zugreifenApp.js
- Wie ist das?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.
quelle
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.jsstore.subscribe( () => { console.log('state\n', store.getState()); debugger; });
Platzieren Sie das in der Datei, in der Sie es tun
createStore
.state
Gehen Sie folgendermaßen vor, um das Objekt von der Konsole in die Zwischenablage zu kopieren :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.
Chrome hat auch eine
copy()
Methode, dahercopy(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/
quelle