我想知道使用redux持续存储数据的最佳方法是什么。我希望能够有条件地执行redux动作。
这里是一个例子:
import React from 'react';
import { connect } from 'react-redux';
import { addForecastToFavorites } from '../actions/sitesActions';
const AddToFavorites = ({currCityCode, onAddWeatherToFavorites }) => {
return (
<div className="flex-center">
<i className="fa fa-heart"></i>
<span className="btn btn-primary"
onClick={() => { onAddWeatherToFavorites(currCityCode) }}>Add To Favorites</span>
</div>
)
}
const mapStateToProps = state => {
//console.log(state) ->
// ['london', 'paris', 'paris'] - prevent store the same code twice...
return {
currCityCode: state.sitesReducer.cityCode,
currFavorites: state.sitesReducer.currFavorites,
}
}
const mapDispatchToProps = dispatch => ({
onAddWeatherToFavorites: (currCityCode) => { dispatch(addForecastToFavorites(currCityCode)) },
})
export default connect(mapStateToProps, mapDispatchToProps)(AddToFavorites);
onAddWeatherToFavorites函数将城市代码存储在一个数组中,稍后,该数组将用于通过调用api来获取城市的所有天气预报。我想首先检查数组中是否已经存在城市代码,因此不存储它。我已经读过有关创建自定义中间件的信息,但是我没有找到说明充分的示例...
答案 0 :(得分:1)
您应该真正考虑将代码放在更新状态的相同位置,这样就可以分派它,然后,即使您有另一个要添加收藏夹的位置,也不必重复执行代码:
switch(action.type) {
case ADD_WEATHER_TO_FAVORITES: {
const city = action.data;
const index = state.cities.indexOf(city);
if (index === -1) {
let cities = [...state.favorites, city]
return Object.assign({}, state, { cities });
}
}
}
return state;
答案 1 :(得分:0)
您可以在currFavorites
数组中为currCityCode
值添加检查,并且仅在返回false时才分派操作。这是一个解决方案:
import React from 'react';
import { connect } from 'react-redux';
import { addForecastToFavorites } from '../actions/sitesActions';
const isCityCodePresent=(currentCityCode, favCitiesArray)=>
(favCitiesArray.find(code => code === currentCityCode));
const AddToFavorites = ({currCityCode, currFavorites, onAddWeatherToFavorites }) => {
return (
<div className="flex-center">
<i className="fa fa-heart"></i>
<span className="btn btn-primary"
onClick={() => {!isCityCodePresent(currCityCode,currFavorites) &&
onAddWeatherToFavorites(currCityCode) }}>Add To Favorites</span>
</div>
)
}
const mapStateToProps = state => {
//console.log(state) ->
// ['london', 'paris', 'paris'] - prevent store the same code twice...
return {
currCityCode: state.sitesReducer.cityCode,
currFavorites: state.sitesReducer.currFavorites,
}
}
const mapDispatchToProps = dispatch => ({
onAddWeatherToFavorites: (currCityCode) => { dispatch(addForecastToFavorites(currCityCode)) },
})
export default connect(mapStateToProps, mapDispatchToProps)(AddToFavorites);