React Native with Redux 使用 reducer 将项目添加到收藏夹的问题

Posted 2023-03-16

【中文标题】React Native with Redux 使用 reducer 将项目添加到收藏夹的问题

【英文标题】：React Native with Redux issue with reducer for adding an item to favourties

【发布时间】：2021-04-26 17:36:27

【问题描述】：

我已经为此苦苦挣扎了很长时间。我试图创建一个减速器，以便能够将一个项目添加到收藏夹列表中。我可以创建一个状态对象并使用 useState 将 id 保存到状态对象中，但是在尝试使用 Redux 做同样的事情时遇到了障碍。

这是我的 favicon.js

import React, useState from 'react'
import  FontAwesome  from '@expo/vector-icons'
import  View, TouchableOpacity,StyleSheet, Text, Alert  from 'react-native'
import  connect  from 'react-redux'
import  toggleFavId, isFavourite  from '../actions'

const FavIcon = (recipeid, toggle, isFav, text) => 

  const [isFavNew, setFavNew] = useState(false)
  const toggleFav = (recipeid) =>
    setFavNew(!isFavNew)
    console.log(`Entered toggle $recipeid isfavnew = $isFavNew`)
  

   return (
        <View>
            <TouchableOpacity style=styles.favItem onPress=() => toggleFav(recipeid)>
                <FontAwesome name=isFavNew == true ? 'heart' : 'heart-o' size=40 color='red' />
               <Text> text</Text>
            </TouchableOpacity>
        </View>
    )


const mapStateToProps = (state) =>(
    favids: state.favids,
)

const mapDispatchToProps = (dispatch) => (
    toggle: (recipeid) => dispatch(toggleFavId(recipeid)),
    isFav: (recipeid) => dispatch(isFavourite(recipeid)),
)

export default connect(mapStateToProps,mapDispatchToProps)(FavIcon)

这是我的减速器，但它不正确，因为我似乎无法提取项目的状态。

import TOGGLE, IS_FAVOURITE from '../actions'

export const favids = (state=[], action) => 
    const type, recipeid = action

    const newRecipe = 
        id: recipeid,
        is_fav: false,
    

    switch (type) 
        case TOGGLE: 
            if (state.includes(recipeid)===true) 
               return state.filter((state) => state.id !== recipeid)
            
            else 
                return state.concat(recipeid)
            
        
        case IS_FAVOURITE: 
            return state.map(item=>
                if(item.recipeid === recipeid)
                    item.is_fav = !item.is_fav
                
            )
        
        default:
            return state
    

我正在尝试创建reducer 以复制FavIcon 中的toggleFav 函数。

const toggleFav = (recipeid) => setFavNew(!isFavNew) 控制台.log(Entered toggle $recipeid isfavnew = $isFavNew)

如果单击图标，我要做的就是切换收藏夹中的食谱。 任何帮助将不胜感激。

【参考方案1】：

试试这个：

return state.map(item=>
                if (item.recipeid === recipeid)
                    return  ...item, is_fav: !item.is_fav  
                
                return item;
            )

此外，一般观察：这是您在此处编写的一种非常古老的 redux 风格。 如果您现在正在学习 redux，那么您可能正在学习一个非常古老的教程 stat 教您一种 redux 风格，最终会比实际需要的时间长很多。 请按照官方教程：https://redux.js.org/tutorials/index 学习如何从头开始编写现代 redux。

【讨论】：

感谢 phry，是的，我是 redux 的新手，并且使用链接和 youtube 上的教程进行学习。

是的，很害怕。请真的去官方教程。现代 redux 不需要类型字符串常量，不需要手动编写的动作或动作创建者，不需要 switch-case 语句，也不需要手写的不可变逻辑。此外，我们建议学习 react-redux hooks over connect，因为它更容易学习。