I am using react-native with redux.
I want to update the state in my contacts when their dueDate has passed and this is my code
This is the way I am updating state in App.js
useEffect(()=>{
setInterval(()=>{
updateContacts(contacts.map(item => item.dueDate < new Date()
?
( d=new Date(item.dueDate),
item.payments.duration=='year'?d.setMonth(d.getMonth()+12)
:item.payments.duration=='hyear'? d.setMonth(d.getMonth()+6)
:item.payments.duration=='month'?d.setMonth(d.getMonth()+1)
:d.setDate(d.getDate() +7),
balance=item.balance-item.payments.payment,
{
...item,dueDate:d,balance
})
:item)
)
},60000)
},[]);
const mapStateToProps=(state)=>{
return{
contacts:state.contactReducer.contacts
}
}
const mapDisptachToProps=(dispatch)=>{
return {
addContact: (contact) => dispatch(addContact(contact)),
updateContacts: (contacts)=> dispatch(updateContacts(contacts))
}
}
export default connect(mapStateToProps,mapDisptachToProps) (App);
My contact.Reducer
const initialState={
contacts:
[
{
id: uuid.v4(),
name: {firstName: 'Neelanshu', lastName: 'Garg'},
contact: {
Mobile: '8800170377',
Alt: '',
email: 'neelanshugarg097@gmail.com',
},
payments: {
paid: 0,
duration: 'month',
payment: 1000,
},
balance: 8800,
date: new Date(2021, 10, 8),
dueDate:new Date(2021,10,15),
},
{
id: uuid.v4(),
name: {firstName: 'Neel', lastName: 'Garg'},
contact: {
Mobile: '8800170377',
Alt: '',
email: 'neelanshugarg097@gmail.com',
},
payments: {
paid: 0,
duration: 'week',
payment: 100,
},
balance: -100,
date: new Date(2021, 10, 8),
dueDate:new Date(2021,10,15),
},
{
id: uuid.v4(),
name: {firstName: 'shu', lastName: 'Garg'},
contact: {
Mobile: '8800170377',
Alt: '',
email: 'neelanshugarg097@gmail.com',
},
payments: {
paid: 0,
duration: 'week',
payment: 100,
},
balance: 8800,
date: new Date(2021, 10, 8),
dueDate:new Date(2021,10,15),
}
]
}
const contactReducer= (state=initialState, action)=>{
switch(action.type)
{
case ADD_CONTACT:
return{
...state,
contacts:[...state.contacts,{id: uuid.v4(), ...action.data}]
};
case DELETE_CONTACT:
return {
...state,
contacts:state.contacts.filter(item => item.id != action.id)
};
case UPDATE_CONTACTS:
console.log(action.data)
return {
...state,
contacts:action.data
}
default:
return state;
}
}
export default contactReducer;
This is store.js
import {createStore, combineReducers} from 'redux'
import contactReducer from './reducers/contactReducer';
import devToolsEnhancer from 'remote-redux-devtools';
const rootReducer= combineReducers({
contactReducer: contactReducer
})
const configureStore = ( ) => createStore(rootReducer,devToolsEnhancer({realtime:true,host: 'localhost',
port: 8000
}));
export default configureStore;
So problem is when I add a new contact(through action.type== ADD_CONTACT) it gets shown in the state and UI for some time but after update state goes back to initial hardcoded state and the new added contact goes away. I cant figure out how to update my state at all.
If I remove the update for state the new contact stays in the state and shown in UI all time. Please Help