Question

我已从Redux商店中删除了一个商品。但它不会重新呈现该应用程序。如果我手动重新渲染该应用程序，则删除的项目消失了。我正在使用这种方法读取和取消读取邮件。但是效果很好。删除也可以，但是不会自动重新渲染应用。如果我手动触发重新渲染，则消息消失了。

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)

我希望，如果按Delete键，则该消息应删除。

注意：已读和未读都可以正常工作

Answer 1

我已经解决了这个问题。我犯的错误是，我在组件状态内直接存储来自商店的prop值。因此它不会重新渲染，因为当props更改时，仅render和componentPropsWillChange运行。因此，将值存储在状态中意味着数据在道具更改时不会第一次更改状态。因此，我面临的情况。

调度动作不会自动重新渲染应用程序

1 个答案: