0
Im Verwenden von Redux, um die Daten in einem globalen Status zu halten, der basierend auf den Aktionen des Benutzers aktualisiert wird. Wenn der Benutzer auf eine Schaltfläche klickt, soll er den Status aktualisieren und den aktuellen Status auf der Schaltfläche anzeigen. Stattdessen wird der ursprüngliche Rest ohne Änderungen angezeigt. Ich habe meine Komponenten und Reduzierer unten aufgelistet.Redux-Speicher aktualisiert sich nicht mit React
Hauptbestandteil:
import React, { Component, PropTypes } from 'react';
import Picture from '../../components/picture.jsx';
import ShoppingCart from '../../components/shoppingcart.jsx';
import { browserHistory } from 'react-router';
import { createStore } from 'redux';
import cart from '../../reducers/index.js';
var flag = false;
const store = createStore(cart);
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {clothingData: 0}
}
componentWillMount() {
fetch('/t')
.then((result) => {
return result.json();
})
.then((re) => {
flag = true;
this.setState({ clothingData: re });
})
.catch(function(error){
console.log(error);
});
}
componentDidMount(){
fetch('/ship')
.then((result) => {
return result.json();
})
.then((res) => {
console.log(res);
})
.catch(function(error){
console.log(error);
});
}
render(){
if (!flag){
return (
<div>
</div>
);
}
else{
//console.log(this.state.clothingData[0].path);
//console.log(this.state.clothingData[0].fileName);
//console.log(this.state.clothingData);
return (
<div>
<Picture src = {this.state.clothingData} onClick = {() => {browserHistory.push('/Product'); }} name = {"joe"} />
<ShoppingCart value={ store.getState() } onIncrement={() => store.dispatch({ type: 'INCREMENT' })} />
</div>
);
}
}
}
Warenkorb Komponente:
import React, { Component, PropTypes } from 'react';
export default class ShoppingCart extends Component {
render(){
const { onIncrement } = this.props
return(
<div>
<button onClick = {onIncrement}> {this.props.value} </button>
</div>
);
}
}
Reducer:
export default (state = 2, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}