Home > other >  How to dispatch and reuse an image with redux
How to dispatch and reuse an image with redux

Time:02-19

I am new to react native and redux and I encounter a Problem. I want to send an image link to my store and reuse this link to show the local image in my home component, the problem is that it's not working. My image is not showing in my emulator, I get this error:

Warning: Failed prop type: Invalid prop "source" supplied to "Image", expected one of type [number].

I think this problem is due to the fact that I didn't figure out how to use require() in my home component.

Here is my code:

First we have my MachineList Component, where there is all the data of my objects including their image link, here there is no problem the images are showing correctly:

const machineListData = [
    {
        id: '1',
        name: 'développé couché',
        poid: 0,
        notes: '',
        imageLink: require('../assets/machineListImages/benchPressI.jpg'),
    },
    {
        id: '2',
        name: 'presse à jambe',
        poid: 0,
        notes: '',
        imageLink: require('../assets/machineListImages/legPressI.jpg'),
    },
    {
        id: '3',
        name: 'machine dos',
        poid: 0,
        notes: '',
        imageLink: require('../assets/machineListImages/backMachineI.png'),
    }
]


const MachinesList = (props) => {


    let [fontsLoaded] = useFonts({
        Circular: require('../assets/fonts/Circular.ttf')
      });  

    function machineAction(props, item) {
        props.navigation.navigate('AddMachineDetails', {item})
    }

//I deleted some code to make it more easy to read

    function machineAction(props, item) {
        props.navigation.navigate('AddMachineDetails', {item})
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList data={machineListData} keyExtractor={(item) => item.id} 
            renderItem={({item}) => (
                <TouchableOpacity style={styles.machineBox} onPress={() => machineAction(props, item)}>
                    <Image source={item.imageLink} style={styles.imageStyle}/>
                    <Text style={styles.machineName}>{item.name}</Text>
                </TouchableOpacity>
            )}
            />
        </SafeAreaView>
    )}
}

So after that I send my object (on which the user pressed in the flatList) using react navigation to my AddMachineDetailsComponent, (And here the image are still displaying). In my AddMachineDetailsComponent I dispatch the object to redux :

const handleAll = () => {
    let date = new Date();
    let history = {weight: machineWeight, date: date}
    const finalObject = {
      id: item.id,
      name: item.name,
      weight: machineWeight,
      notes: machineNotes,
      history: [history],
      imageLink: item.imageLink
    }
    dispatch(newmachine(finalObject))
    props.navigation.navigate("MachinesList")

  }

Here is what my initialState looks like in redux. normally the initialState Array is empty but I put a value to check if it works by copying my object in the redux devTool of Google Chrome. (So the object that you see in the array is just a copy of what my AddMachineDetails send.) :

const initialState = [
    {
        id: '0',
        name: 'machine dos',
        weight: 54,
        notes: "Ce sont mes notes",
        history: [{weight: 54, date: "2022-02-16T09:11:44.843Z"}],
        imageLink: '/static/media/backMachineI.7b31b62c.png'
    }
]


const addMachineReducer = ( state = initialState, action) => {
    //TODO:
    //test mettre itemPosition une fois là peut être ??
    let itemPosition = state.findIndex(fPostition)

    function fPostition(place) {
        //retourne true ou false et findindex si true va donner la position
        return place.id === action.position
    }

    switch(action.type) {
        case 'NEWMACHINE': 

            //pour l'id je génére un nombre aléatoire (c'est pas le truc parfait)
            let i = Math.random()* 10000
            action.payload.id = i.toString()
            return [...state, action.payload];


        case 'UPDATEMACHINEWEIGHT':
            console.log('début')
            // let itemPosition = state.findIndex(fPostition)

            console.log('           
  • Related