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

Question

我已经为此苦苦挣扎了很长时间。我试图创建一个减速器，以便能够将一个项目添加到收藏夹列表中。我可以创建一个状态对象并使用 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}) }

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

Answer 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。