Javascript 如何在Redux道具中使用默认道具？

我试图制作一个“PhotoGalery应用程序”，其中每个图像都是一个“按钮”，用于切换模态标记的布尔属性。问题是图像是由一个平面列表渲染的，它将道具传递给组件“GenerateImage.js”，但同时，我还需要将state和dispatch函数作为参数传递

呈现平面列表的文件：

import React, { Component } from 'react'
import { FlatList, View, StyleSheet, TouchableOpacity, Text, AppRegistry } from 'react-native'
import { connect } from 'react-redux'

import GenerateImage from '../components/GenerateImage'
import commonStyles from '../commonStyles'
import Modal from '../components/Modal'

const Photos = ({ params }) => {
  return (
    <View style={{ flex: 1 }}>
        <Modal isVisible={params.showFullImage} />

        <View style={styles.buttonsContainer}>
            <TouchableOpacity style={styles.touchContainer}>
                <Text style={styles.button}>Hoje</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touchContainer}>
                <Text style={styles.button}>Mês</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touchContainer}>
                <Text style={styles.button}>Ano</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touchContainer}>
                <Text style={styles.button}>Álbuns</Text>
            </TouchableOpacity>
        </View>

        <View style={{ flex: 30 }}> 
            <FlatList data={params.images} keyExtractor={item => `${item.id}`}
            renderItem={({item}) => <GenerateImage {...item} />} numColumns={2} />
        </View>  
    </View>
  )
}

const styles = StyleSheet.create({
    buttonsContainer: {
        flex: 3,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1c2431',
    },
    touchContainer: {
        marginHorizontal: 20,
        backgroundColor: '#439ce8',
        borderRadius: 30,
        width: 65,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5
    },
    button: {
        color: 'white',
        fontFamily: commonStyles.Font,
        fontSize: 14
    }
})


export default connect(state => ({ params: state[0] }))(Photos)

import React，{Component}来自“React”
从“react native”导入{FlatList、View、StyleSheet、TouchableOpacity、Text、AppRegistry}
从“react redux”导入{connect}
从“../components/GenerateImage”导入GenerateImage
从“../commonStyles”导入commonStyles
从“../components/Modal”导入模态
常量照片=（{params}）=>{
返回(
霍杰
马斯
阿诺
阿尔邦
`${item.id}`}
renderItem={（{item}）=>}numColumns={2}/>
)
}
const styles=StyleSheet.create({
按钮容器：{
弹性：3，
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#1c2431”，
},
touchContainer：{
marginHorizontal:20，
背景颜色：“#439ce8”，
边界半径：30，
宽度：65，
对齐项目：“居中”，
为内容辩护：“中心”，
填充：5
},
按钮：{
颜色：'白色'，
fontFamily:commonStyles.Font，
尺寸：14
}
})
导出默认连接（状态=>（{params:state[0]}））（照片）

GenerateImage.js：

import React from 'react'
import { View,
    StyleSheet,
    Image,
    PixelRatio,
    Dimensions,
    TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'



const GenerateImage = (props, {param, dispatch}) => {

    function toggleModal(param) {
        return {
            type: 'TOGGLE_MODAL_ON',
        }
    }

    return (
        <View style={styles.container}>
            <View style={styles.imgContainer}>
                <TouchableOpacity activeOpacity={0.7} onPress={() => dispatch(toggleModal(param))}>
                    <Image source={props.image} style={styles.imgContainer} />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginVertical: 5,
        marginHorizontal: 4
    },
    imgContainer: {
        height: Dimensions.get('window').height * 0.25,
        width: Dimensions.get('window').width * 0.48,
        //borderRadius: 8,
        //flex: 1,
        //orderWidth: 1,
    },
    image: {
        resizeMode: 'contain',
        aspectRatio: PixelRatio.get()
    },
})

export default connect(state => ({ param: state[0].showFullImage }))(GenerateImage)

从“React”导入React
导入{视图，
样式表，
形象,，
像素比率，
尺寸，
来自“react native”的TouchableOpacity}
从“react redux”导入{connect}
const GenerateImage=（props，{param，dispatch}）=>{
功能切换模式（参数）{
返回{
键入：“切换模式打开”，
}
}
返回(
调度（切换模式（参数））}>
)
}
const styles=StyleSheet.create({
容器：{
弹性：1，
第五名：，
marginHorizontal:4
},
IMG容器：{
高度：尺寸。获取（“窗口”）。高度*0.25，
宽度：尺寸。获取（“窗口”）。宽度*0.48，
//边界半径：8，
//弹性：1，
//订单宽度：1，
},
图片：{
resizeMode:'包含'，
aspectRatio:PixelRatio.get（）
},
})
导出默认连接（状态=>（{param:state[0].showFullImage}））（GenerateImage）

---

那么，我如何传递这两个数据呢？

我需要同时传递state和dispatch函数作为参数是什么意思？您需要将其传递到切换模式或何处？感谢您的可用性。因此，我需要切换布尔属性（它存储在redux存储中）的状态和分派，在用户按下图像的瞬间为true，并且使用此属性我将传递其模式可见性值。对于这样简单的事情来说，这似乎太过分了。。我只想使用

useState

钩子来保持

isToggled=true/false

和

currentImage=null/defaultImage

你为什么要麻烦存储一个图像并在redux中切换状态通常我会使用useState，但我不能从另一个文件更改状态值。我已经尝试了很多方法，但是没有一种有效。如果这样的话，你的redux的action-in-action创建者应该是这样的：

return{type:“TOGGLE_-MODAL_-ON”，image:yourImage}

然后在reducer中，您应该将状态设置为传入

action

的

image

变量，这与您使用setState的方式几乎相同，但您只需将其移动到reducer，您的意思是我还需要将state和dispatch函数作为参数传递？您需要将其传递到切换模式或何处？感谢您的可用性。因此，我需要切换布尔属性（它存储在redux存储中）的状态和分派，在用户按下图像的瞬间为true，并且使用此属性我将传递其模式可见性值。对于这样简单的事情来说，这似乎太过分了。。我只想使用

useState

钩子来保持

isToggled=true/false

和

currentImage=null/defaultImage

你为什么要麻烦存储一个图像并在redux中切换状态通常我会使用useState，但我不能从另一个文件更改状态值。我已经尝试了很多方法，但是没有一种有效。如果这样的话，你的redux的action-in-action创建者应该是这样的：

return{type:“TOGGLE_-MODAL_-ON”，image:yourImage}

然后在减速器中，您应该将状态设置为传入

操作的
图像
变量

，这与您使用设置状态的方式几乎相同，但您只需将其移动到减速器中即可