如何通过反应 redux 中的唯一字符串切换状态？

Question

我在 thunk 中间件的帮助下通过映射来自 JSON 响应的数据来动态地在组件文件中创建一个列表。 我想从该列表中选择元素并将它们添加到“我的收藏夹”中， 我的 JSON 响应没有唯一的 ID，而是唯一的字符串。

减速机：

   const initialstate = { isFav: false }
   const reducer = (state=initialstate, action) => {
   switch(action.type){
   case actionTypes.TOGGLE_FAVORITE:
             return {
              ...state,
              isFav: **What to do here?**
             }
                     
         default:
             break;
         }
    }

export default reducer;

Action.js：

export const TOGGLE_FAVORITE = 'TOGGLE_FAVORITE';
export const togglefav = (url) =>{
    return{
        type: TOGGLE_FAVORITE,
        payload: url
    }
}

组件.js

this.props.dailySource.map((source,index) =>{
...
<div className={classes.star}>
            <span className="fa fa-star" key={index} onClick={()=>             
            this.props.onToggleFavorite(source.url) }
            style={{ color: (this.props.toggleFav) ? 'red' : '' }}></span>
            </div>
}
}))

const mapStateToProps = state =>{
  return{
    dailySource: state.list.newsItem,
    toggleFav: state.list.isFav 
  }
}

const mapDispatchToProps = dispatch =>{
  return{
    onToggleFavorite: (url) => dispatch (actionCreators.togglefav(url))
  }
}

Answer 1

如果你能简化你的模式会更好。

与其将 isFav 提取到另一个状态树，不如将它放在列表本身的对象中会容易得多。

让我们看看代码。

减速器

const initialState = [];

const reducer = (state=initialState, action) => {
    switch(action.type) {
        case actionTypes.TOGGLE_FAVORITE:
            const dailySource = [...state].map((v) => {
                if (v.url === action.url) {
                    v.isFav = true;
                }
            return v;
            });
            return dailySource;
        default:
            return state;
    }
}

组件

this.props.dailySource.map((source,index) =>{
<div className={classes.star}>
            <span className="fa fa-star" key={index} onClick={()=>             
            this.props.onToggleFavorite(source.url) }
            style={{ color: source.isFav ? 'red' : '' }}></span>
            </div>
}
}))