如何使用redux重新渲染子組件上的prop變化？

Question

我有一個使用redux和不可變的js的反應原生應用程序。當我從主屏幕調度一個動作時，它會通過我的動作，到我的reducer，然後返回到我的容器，但是，視圖不會更新，componentWillReceieveProps也不會被調用。此外，主屏幕是其項目是子組件項目的列表。這裏是相關的問題代碼，如果你想看更多的話讓我知道。

渲染與該數據的行：

renderRow(rowData) { 
    return (
     <Item item={ rowData } likePostEvent={this.props.likePostEvent} user={ this.props.user } removable={ this.props.connected } /> 
    ) 
} 

Item.js的一部分調度一個動作，並示出了結果：

<View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}> 
         <TouchableOpacity onPress={ this.changeStatus.bind(this, "up") }> 
          <Image source={require('../img/up-arrow.png')} style={s.upDownArrow} /> 
         </TouchableOpacity> 
         <Text style={[s.cardText,{fontSize:16,padding:2}]}> 
          { this.props.item.starCount } 
         </Text> 
         <TouchableOpacity onPress={ this.changeStatus.bind(this, "down") }> 
          <Image source={require('../img/up-arrow.png')} style={[s.upDownArrow,{transform: [{rotate: '180deg'}]}]} /> 
         </TouchableOpacity> 
        </View> 

動作分派前進到火力，其具有一個派發另一個動作的onChange處理程序。

減速機：

const initialState = Map({ 
onlineList: [], 
offlineList: [], 
filteredItems: [], 
connectionChecked: false, 
user: '' 
}) 
... 
... 
case ITEM_CHANGED: 
list = state.get('onlineList') 
if(state.get('onlineList').filter((e) => e.id == action.item.id).length > 0){ 
    let index = state.get('onlineList').findIndex(item => item.id === action.item.id); 
    list[index] = action.item 
    list = list.sort((a, b) => b.time_posted - a.time_posted) 
} 
return state.set('onlineList', list) 
      .set('offlineList', list) 

容器：

function mapStateToProps(state) { 
return { 
    onlineItems: state.items.get('onlineList'), 
    offlineItems: state.items.get('offlineList'), 
    filteredItems: state.items.get('filteredItems'), 
    connectionChecked: state.items.get('connectionChecked'), 
    connected: state.items.get('connected'), 
    user: state.login.user 
    } 
} 

當我連接的onChange：

export function getInitialState(closure_list) { 
    itemsRef.on('child_removed', (snapshot) => { 
    closure_list.removeItem(snapshot.val().id) 
    }) 
    itemsRef.on('child_added', (snapshot) => { 
    closure_list.addItem(snapshot.val()) 
    }) 

    itemsRef.on('child_changed', (snapshot) => { 
    closure_list.itemChanged(snapshot.val()) 
    }) 

    connectedRef.on('value', snap => { 
    if (snap.val() === true) { 
     closure_list.goOnline() 
    } else { 
     closure_list.goOffline() 
    } 
    }) 
    return { 
    type: GET_INITIAL_STATE, 
    connected: true 
    } 
} 

調用get初始狀態：

this.props.getInitialState({ 
     addItem: this.props.addItem, 
     removeItem: this.props.removeItem, 
     goOnline: this.props.goOnline, 
     goOffline: this.props.goOffline, 
     itemChanged: this.props.itemChanged 
    }) 

歡迎任何建議，非常感謝！

Answer 1

問題的根源可能在於調用Firebase。如果它是一個異步調用，它的回調回調可能不會返回可以被你的動作使用的東西。

你知道它是否正在返回承諾嗎？如果是這種情況，則存在處理這種調用的中間件，並停止調用動作直到收到正確的響應。一個這樣的中間件是Redux-Promise。

Answer 2

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore,combineReducers } from 'redux' //Redux.createStore 
import { Provider,connect } from 'react-redux'; 



//Функція яка змінює store 
const hello = (state= {message:'none'}, action) => { 
    switch (action.type) { 
     case 'HELLO': 
      return Object.assign({}, state, {message:"hello world"}); 
      break 
     case 'buy': 
      return Object.assign({}, state, {message:"buy"}); 
      break; 
     case 'DELETE': 
      return Object.assign({}, state, {message:"none"}); 
      break; 
     default : 
      return state; 
    } 
}; 


const price = (state= {value:0}, action) => { 
    switch (action.type) { 
     case 'HELLO': 
      return Object.assign({}, state, {value: state.value + 1 }); 
      break; 
     default : 
      return Object.assign({}, state, {value:0}); 
    } 
}; 

const myApp = combineReducers({ 
    hello,price 
}); 

//створюємо store 
let store = createStore(myApp); 

let unsubscribe = store.subscribe(() => console.log(store.getState())) 



//VIEW 
class App extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 

       <p>value: {this.props.price}</p> 

       <a href="#" onClick={this.props.onClick}>click</a><b>{this.props.message}</b> 
      </div> 
     ) 
    } 
} 


//mapStateToProps() для чтения состояния и mapDispatchToProps() для передачи события 

const mapStateToProps = (state, ownProps) => { 
    return { 
     message: state.hello.message, 
     price: state.price.value 
    } 
}; 
const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
      onClick:() => { 

       var items= ['HELLO','buy','DELETE','error'] 
       var item = items[Math.floor(Math.random()*items.length)]; 

       dispatch({ type: item }) 
     } 
} 
} 


const ConnectedApp = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App); 




ReactDOM.render(
    <Provider store={store}> 
     <ConnectedApp /> 
    </Provider>, 
    document.getElementById('app') 
);