Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Actions don't have "type" - Error In React Native

$
0
0

I am a beginner in React Native, Trying to learn redux, with functional components, stuck on this error."Error: Actions may not have an undefined "type" property. Have you misspelled a constant?".

Creating a simple. to-do list.

My Redux.js file...

import {createStore, applyMiddleware} from 'redux';import thunk from 'redux-thunk';import {uuid} from 'react-native-uuid';const initialState = {  todos: [    {      id: 0,      name: 'Test ToDo 1',      completed: false,    },    {      id: 1,      name: 'Test ToDo 2',      completed: true,    },  ],};export const store = createStore(reducer, applyMiddleware(thunk));function reducer(state = initialState, action) {  console.log('type '+ JSON.stringify(action));  switch (action.type) {    case 'ADD-TODO':      return {...state, todos: [...state, action.payload]};    case 'TOGGLE-TODO':      return {        ...state,        todos: state.todos.map((todo) =>          todo.id === action.payload            ? {...todo, completed: !todo.completed}            : todo,        ),      };    case 'DELETE-TODO':      return {        ...state,        todos: state.todos.filter((todo) => todo.id !== action.payload),      };    default:      return state;  }}export const addToDoAction = (todo) => ({  type: 'ADD-TODO',  payload: todo,});export const toggleToDoAction = (todoId) => ({  type: 'TOGGLE-TODO',  payload: todoId,});export const deleteToDoAction = (todoId) => ({  type: 'DELETE-TODO',  payload: todo,});

Here is the ToDO Input component

import React, {useState} from 'react';import {View, TextInput, Button, Text} from 'react-native';import {useDispatch} from 'react-redux';import {addToDoAction} from '../redux/redux';import uuid from 'react-native-uuid';const ToDoInput = () => {  const [text, setText] = useState('Test');  const addToDo = useDispatch((todo) => addToDoAction(todo));  const onChangeText = (text) => {    setText(text);  };  return (<View><Text>Add To Do</Text><TextInput        style={{height: 40, borderColor: 'gray', borderWidth: 1}}        onChangeText={(text) => onChangeText(text)}        editable={true}        value={text}      /><Button        title={'Add ToDo'}        onPress={() =>          addToDo({            id: uuid.v4(),            name: text,            completed: false,          })        }      /></View>  );};export default ToDoInput;

When I tap the add button, I am getting error...

"Error: Actions may not have an undefined "type" property. Have you misspelled a constant?".

This is my app.js file. contents.

import React, {useState} from 'react';import {View, Text, SafeAreaView, StyleSheet} from 'react-native';import {Provider} from 'react-redux';import {store} from './redux/redux';import ToDoInput from './components/ToDoInput';import ToDoList from './components/ToDoList';import AddItem from './components/AddItem';const App = () => {  return (<Provider store={store}><SafeAreaView style={{flex: 1, paddingTop: 100}}><View style={{flex: 1, paddingTop: 100}}><ToDoInput />          {/* <ToDoList /> */}</View></SafeAreaView></Provider>  );};const styles = StyleSheet.create({  container: {    flex: 1,    paddingTop: 60,  },});export default App;

Couldn't find a way to fix this. Please help.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>