Dispatching an action does not re-render the app automatically - react-native

Question

I have deleted an item from the redux store. but it does not re-render the application. if I manually rerender the app, then deleted item went. I am doing this method for reading and un-reading the message. but it works fine. deleting also work, but it is not re-render the app automatically. if I trigger the re-render manually then the message was gone.
Reducer.js
import { combineReducers } from 'redux'
import {
DELETE_MESSAGE,
ADD_MESSAGE,
READ_MESSAGE,
UN_READ_MESSAGE,
ARCHIVED_MESSAGE,
UN_ARCHIVED_MESSAGE
} from './Actions'
// reducers
const messageReducer = (state = [], action) => {
switch (action.type) {
case DELETE_MESSAGE:
return state.filter(value => value.key != action.payload.key)
case ADD_MESSAGE:
return [...state, action.payload]
case READ_MESSAGE:
return state.map(value => {
if (value.key == action.payload.key) {
value.read = 'true'
return value
}
return value
})
case UN_READ_MESSAGE:
return state.map(value => {
if (value.key == action.payload.key) {
value.read = 'false'
return value
}
return value
})
case ARCHIVED_MESSAGE:
return state.map(value => {
if (value.key == action.payload.key) {
value.archived = 'true'
return value
}
return value
})
case UN_ARCHIVED_MESSAGE:
return state.map(value => {
if (value.key == action.payload.key) {
value.archived = 'false'
return value
}
return value
})
default:
return state
}
}
// combine reducer
const reducer = combineReducers({
message: messageReducer
})
export default reducer
Actions.js
// action types
export const DELETE_MESSAGE = 'DELETE_MESSAGE'
export const ADD_MESSAGE = 'ADD_MESSAGE'
export const READ_MESSAGE = 'READ_MESSAGE'
export const UN_READ_MESSAGE = 'UN_READ_MESSAGE'
export const ARCHIVED_MESSAGE = 'ARCHIVED_MESSAGE'
export const UN_ARCHIVED_MESSAGE = 'UN_ARCHIVED_MESSAGE'
// action creators
export const deleteMessage = (message) => ({
type: DELETE_MESSAGE,
payload: message
})
export const addMessage = (message) => ({
type: ADD_MESSAGE,
payload: message
})
export const readMessage = (message) => ({
type: READ_MESSAGE,
payload: message
})
export const unReadMessage = (message) => ({
type: UN_READ_MESSAGE,
payload: message
})
export const archivedMessage = (message) => ({
type: ARCHIVED_MESSAGE,
payload: message
})
export const unArchivedMessage = (message) => ({
type: UN_ARCHIVED_MESSAGE,
payload: message
})
deleting page .js
import React from 'react'
import { StyleSheet, View, TouchableHighlight, Alert } from 'react-native'
import { readMessage } from '../../../Redux/Actions'
import { unReadMessage } from '../../../Redux/Actions'
import { deleteMessage } from '../../../Redux/Actions'
import { connect } from 'react-redux'
import Icons from './Icon' // trash-alt
class HiddenRight extends React.Component {
delete = (data) => {
Alert.alert(
'Would you like to Delete?',
'You will permanently remove this message from your mobile local storage',
[
{text: 'Cancel', onPress: () => this.props.delete({})},
{text: 'Delete', onPress: () => this.props.delete(data)}
]
)
}
render () {
return (
<View style={styles.container}>
<TouchableHighlight onPress={() => this.delete(this.props.data) }>
<Icons iconName='trash' title='Delete' backgroundColor='#f80101' />
</TouchableHighlight>
{this.props.data.read == 'false'
? <TouchableHighlight onPress={() => this.props.read(this.props.data)}>
<Icons iconName='envelope' title='Read' backgroundColor='#007AFF' />
</TouchableHighlight>
: <TouchableHighlight onPress={() => this.props.unRead(this.props.data)}>
<Icons iconName='envelope-open' title='UnRead' backgroundColor='gray' />
</TouchableHighlight>
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}
})
export default connect(null, { delete: deleteMessage, read: readMessage, unRead: unReadMessage})(HiddenRight)
Store.js
import { createStore } from 'redux'
import reducer from './Reducer'
const DEFAULT_STATE = {
message: [{
'key': '0',
'title': 'Hello, It about my self. Keep watch',
'date': '02/89/3456',
'body': 'Nive to here you all, I am not crazy, Well will you find. yes Of course. I will be there on 56-78-2',
'read': 'false',
'archived': 'false'
}, {
'key': '1',
'title': 'Hello, It about my self. Keep watch',
'date': '02/89/3456',
'body': 'Nive to here you all, I am not crazy, Well will you find. yes Of course. I will be there on 56-78-2',
'read': 'false',
'archived': 'false'
}]
}
// store
const store = createStore(reducer, DEFAULT_STATE)
export default store
MessageScreen.js
...
...
function mapStateToProps(state){
return {
listViewData:state
}
}
export default connect(mapStateToProps)(MessageScreen)
I am expecting that if press delete button, then the message should remove.
Note: read and unread are working fine

Answer 1

I have solved this issue. The mistake I did is, I was storing the prop value which comes from the store directly inside the component state. So it's not re-render because when props change only the render & componentPropsWillChange run. so storing the value in the state means data not change the state first time when a prop changes. Thus the case I have faced.