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.