Отправка действия не приводит к повторной визуализации приложения автоматически - PullRequest
Новая
       21

Отправка действия не приводит к повторной визуализации приложения автоматически

1 голос
/ 01 апреля 2019

Я удалил предмет из магазина редуксов. но это не перерисовывает приложение. если я вручную обновлю приложение, то удаленный элемент уйдет. Я делаю этот метод для чтения и отмены чтения сообщения. но работает нормально удаление также работает, но оно не выполняет повторную визуализацию приложения автоматически. если я запускаю повторный рендеринг вручную, то сообщение пропало.

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
})

удаление страницы .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)

Я ожидаю, что если нажать кнопку удаления, сообщение должно быть удалено.

Примечание: прочитанные и непрочитанные работают нормально

1 Ответ

0 голосов
/ 11 июля 2019

Я решил эту проблему.Ошибка, которую я совершил, заключалась в том, что я хранил значение проп, которое поступает из хранилища непосредственно в состояние компонента.Так что это не повторный рендеринг, потому что когда реквизиты меняются, запускается только render & componentPropsWillChange.поэтому сохранение значения в состоянии означает, что данные не изменяют состояние в первый раз, когда изменяется реквизит.Таким образом, дело, с которым я столкнулся.

...