[英]How to update the global state using redux and remove an item from the global state
我正在嘗試學習 redux,但我對如何正確使用我在行動中擁有的deleteCar
概念感到deleteCar
。 減速器運行良好,但問題出在cars
的全局狀態,如何更新 Car 組件中汽車的狀態,然后調用deleteCar
函數並修改cars
的狀態。 當我在Car
組件中打印汽車狀態時,它是空的。
我有一個名為 Cars 的組件,它是 Car(單車)的父組件
import React from "react";
import Car from "../Car";
import { connect } from "react-redux";
class Cars extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: []
};
}
componentDidMount() {
fetch(url)
.then(response => response.json())
.then(data => this.setState({ cars: data }));
}
render() {
const { cars } = this.state;
return (
<div>
{cars.map(c => (
<Car key={c.id} make={c.make} price={c.price} id={c.id} />
))}
</div>
);
}
}
const mapStateToProps = reduxStoreState => {
return {
cars: reduxStoreState.cars
};
};
export default connect(mapStateToProps)(Cars);
單車
import React from "react";
import { deleteCar } from "../../actions/delete";
import { connect } from "react-redux";
const Car = ({ deleteCar, make, price, id }) => {
return (
<div className="card m-4">
<div className="row">
<div className="col">
<h3>{make}</h3>
<p>{price}</p>
</div>
</div>
<div className="row">
<button
className="btn btn-danger"
onClick={() =>
deleteCar({
id: id,
make: make,
price: price
})
}
>
Delete Car
</button>
</div>
</div>
);
};
const mapStateToProps = reduxStoreState => {
return {
cars: reduxStoreState.cars
};
};
export default connect(mapStateToProps, { deleteCar })(Car);
行動
import { DELETE } from "../constants";
export const deleteCar = (payload) => {
return {
type: DELETE,
payload: payload
};
};
減速器
import { ADD, DELETE, EDIT } from "../constants";
export default function(state = { cars: [] }, action) {
switch (action.type) {
case ADD:
return {
...state,
cars: [...state.cars, action.payload]
};
case DELETE:
return {
...state,
cars: state.cars.filter(obj => obj !== action.payload)
};
case EDIT:
return {
...state,
cars: action.payload
};
default:
return state;
}
}
下面的代碼不會像你期望的那樣工作:
cars: state.cars.filter(obj => obj !== action.payload)
在 JavaScript 中,對象作為引用存儲在變量中。 通過像這樣調用刪除操作:
deleteCar({
id: id,
make: make,
price: price
})
您每次都在創建一個新對象,因此它們永遠不會匹配並且不會被過濾。
看起來好像比較是這樣的:
{ id: id, make: make, price: price } === { id: id, make: make, price: price }
但實際上,它更像是這樣的比較:
// Both objects contain the same values
// But will not evaluate as equal because the references are different
'object_reference_1' === 'object_reference_2'
相反,我建議通過id
檢查,如下所示:
cars: state.cars.filter(obj => obj.id !== action.payload.id)
第二個問題是您在Cars
復制了 local 和 redux 狀態。
不使用本地狀態,而是調度一個操作來填充 redux。 它可能看起來像這樣:
componentDidMount() {
fetch(url)
.then(response => response.json())
// Or preferably create a new action and call it like you did `deleteCar`
.then(data => this.props.dispatch({ type: 'INITIALIZE', cars: data }));
}
然后在減速器中添加這種情況:
switch (action.type) {
case 'INITIALIZE':
return {
...state,
cars: action.payload
};
確保刪除cars
的本地狀態並替換const { cars } = this.state;
使用this.props
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.