用React Redux按条件存储数据的最佳方法是什么?

时间:2019-09-09 19:18:52

标签: reactjs redux

我想知道使用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来获取城市的所有天气预报。我想首先检查数组中是否已经存在城市代码,因此不存储它。我已经读过有关创建自定义中间件的信息,但是我没有找到说明充分的示例...

2 个答案:

答案 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);