組件的道具不會在React Native中用Redux更新

Question

我需要一些幫助來使用我的應用程序和Redux！ （目前，我討厭它啊）

所以，我有一個通知頁面組件獲取一些數據，我需要把數據長度放入我的REDX存儲將徽章放在我的標籤欄中我的圖標！

我的主減速器：

import { combineReducers } from "redux"; 
import NotificationReducer from "./NotificationReducer"; 

export default function getRootReducer(navReducer) { 
    return combineReducers({ 
     nav: navReducer, 
     notificationReducer: NotificationReducer 
    }); 
} 

我通知減速

const initialState = { 
    NotificationCount: 0 
}; 

export default function notifications(state = initialState, action = {}) { 
    switch (action.type) { 
     case 'SET_COUNT' : 
      console.log('REDUCER NOTIFICATION SET_COUNT',state) 
      return { 
       ...state, 
       NotificationCount: action.payload 
      }; 

     default: 
      return state; 
    } 
}; 

我的行動：

export function setNotificationCount(count) { 
    return function (dispatch, getState) { 
      console.log('Action - setNotificationCount: '+count) 
      dispatch({ 
      type: 'SET_COUNT', 
      payload: count, 
      }); 
    }; 
}; 

我的組件：

import React, { Component } from 'react'; 
import { View, Text, StyleSheet, ScrollView, Dimensions, TouchableOpacity, SectionList, Alert } from 'react-native'; 
import Icon from 'react-native-vector-icons/Ionicons'; 
import { Notification } from '@Components'; 
import { ORANGE } from '@Theme/colors'; 
import { NotificationService } from '@Services'; 
import Style from './style'; 

import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as Actions from '@Redux/Actions'; 

const width = Dimensions.get('window').width 
const height = Dimensions.get('window').height 

export class NotificationsClass extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      dataSource: [], 
      NotificationCount: undefined 
     }; 
    } 

    async componentWillMount() { 
     this.updateNotifications(); 
    } 

    componentWillReceiveProps(nextProps){ 
     console.log('receive new props',nextProps); 
    } 

    async updateNotifications() { 
     this.props.setNotificationCount(10); <--- 
     let data = await NotificationService.get(); 
     if (data && data.data.length > 0) { 
      this.setState({ dataSource: data }); 
      console.log(this.props) <-- NotificationCount is undefined 
     } 
    } 


    render() { 
     if (this.state.dataSource.length > 0) { 
      return (
       <SectionList 
        stickySectionHeadersEnabled 
        refreshing 
        keyExtractor={(item, index) => item.notificationId} 
        style={Style.container} 
        sections={this.state.dataSource} 
        renderItem={({ item }) => this.renderRow(item)} 
        renderSectionHeader={({ section }) => this.renderSection(section)} 
       /> 
      ); 
     } else { 
      return this.renderEmpty(); 
     } 
    } 

    renderRow(data) { 
     return (
      <TouchableOpacity activeOpacity={0.8} key={data.notificationId}> 
       <Notification data={data} /> 
      </TouchableOpacity> 
     ); 
    } 


} 


const Notifications = connect(
    state => ({ 
     NotificationCount: state.NotificationCount 
    }), 
    dispatch => bindActionCreators(Actions, dispatch) 
)(NotificationsClass); 


export { Notifications }; 

（我已經刪除了一些無用的代碼）

頂級：

const navReducer = (state, action) => { 
    const newState = AppNavigator.router.getStateForAction(action, state); 
    return newState || state; 
}; 

@connect(state => ({ 
    nav: state.nav 
})) 
class AppWithNavigationState extends Component { 
    render() { 
     return (
      <AppNavigator 
       navigation={addNavigationHelpers({ 
        dispatch: this.props.dispatch, 
        state: this.props.nav, 
       })} 
      /> 
     ); 
    } 
} 

const store = getStore(navReducer); 

export default function NCAP() { 
    return (
     <Provider store={store}> 
      <AppWithNavigationState /> 
     </Provider> 
    ); 
} 

陣營：15.6.1 陣營母語：0.46.4 終極版：3.7.2 陣營 - 終極版：5.0 .5 反應導航：1.0.0-beta.11 節點：6.9.1

所以，如果你有一個想法！這將是偉大的：D！

謝謝！

Answer 1

有三個問題。

首先，React的重新渲染幾乎總是異步的。在updateNotifications()中，您打電話this.props.setNotificationCount(10)，但稍後嘗試在該功能中查看/使用道具。即使有await在那裏，也不能保證this.props.NotificationCount將被更新。

二，根據您的減速機結構和mapState函數，props.NotificationCount實際上不存在。在你getRootReducer()功能，您可以：

return combineReducers({ 
    nav: navReducer, 
    notificationReducer: NotificationReducer 
}); 

這意味着你的根狀態將是state.nav和state.notificationReducer。但是，在你mapState功能，您可以：

state => ({ 
    NotificationCount: state.NotificationCount 
}), 

state.NotificationCount永遠不會存在，因爲你沒有使用該密鑰的名字，當你叫combineReducers。

三，您的notificationReducer實際上有一個嵌套的值。它返回{NotificationCount : 0}。

因此，您實際需要的值實際上是state.notificationReducer.NotificationCount。這意味着您的mapState功能實際上應該是：

state => ({ 
    NotificationCount: state.notificationReducer.NotificationCount 
}), 

如果notificationReducer實際上並不打算存儲任何其他值，我建議簡化它，這樣它只是存儲的數量，而不是一個內部的數目的。我也建議從你的狀態片名刪除單詞Reducer。這樣，你可以參考state.notification。

欲瞭解更多信息，請參閱終極版文檔的使用combineReducers如何定義你的狀態形狀Structuring Reducers - Using combineReducers部分，它進入更多細節。