Unable to Render a FlatList

I’m trying to render a FlatList but I don’t see it on the Screen

I get my Data of my Reducer through a Console Log and in the Console I get the correct Data:

User {
  "apellido": "Alas",
  "correo": "[email protected]",
  "id": 2021-02-08T23:52:58.855Z,
  "nombre": "Rene",
  "telefono": "72457183",
}

Here is my Code:

import React from "react";
import { View, Text, FlatList, StyleSheet } from "react-native";
import { useSelector } from 'react-redux';

import UserItem from "../components/UserItem";

export default function Page2() {
    const users = useSelector(state => state.registro.availableUsers);

    console.log(users);

    if (users.length === 0) {
        return <View style={styles.centered} >
            <Text>No Existen Usuarios</Text>
        </View>
    }

    return (
        <FlatList
        data={users}
        keyExtractor={item => item.id.toString()}
        renderItem={
            itemData => <UserItem
                nombre={itemData.item.nombre}
                apellido={itemData.item.apellido}
                telefono={itemData.item.telefono}
                coreo={itemData.item.coreo}
                onSelect={() => { }}
            />
        }
    />
    )
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f9fafd',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    }
});

As you can see the Console Log shows there is data being Received from the Reducer, but there is no data displayed through the FlatList

As you can see in the Picture

enter image description here

I tried to get to the same Result (Render a List) with the MAP function but still getting an Error:

TypeError: undefined is not a function (near ‘…users.map…’)

Although I know there shouldn’t be an Undefined as there is that printed to the Console

Any Ideas?

PS. I think the Issue might be with the Action or Reducer:

Action

//Import Model
import { createStore } from 'redux';
import User from '../../models/user';

//Constant Creation 
export const REGISTER = 'REGISTER';

export const createUser = (nombre, apellido, telefono, correo) => {
    return async (dispatch) => {
        console.log('entra a fun');
        try{
            console.log('antes de crear');
            const createdUser = new User(new Date(), nombre, apellido, telefono, correo);
            console.log('despues de crear');
            console.log(createUser);

            dispatch({type: REGISTER, user: createdUser});
        }
        catch (err) {
            throw err;
        }
    }
};

Reducer

import { REGISTER } from '../actions/registro';

const initialState = {
    availableUsers: [],
}

export default (state = initialState, action) => {
    switch (action.type) {
        case REGISTER:
            return {
                ...state,
                availableUsers: action.user,
            };
    }
    return state;
};

Answer

Your available users is just getting one user, instead of updating/appending the new one.

export default (state = initialState, action) => {
    switch (action.type) {
        case REGISTER:
            return {
                ...state,
                availableUsers: [...state.availableUsers, action.user],
            };
    }
    return state;
};

By spreading (…) state.availableUsers, you can append the new user to the end of the existing array.