密鑰在react-redux應用程序中的作用以及管理動態組件的狀態

我基本上明白了密鑰的用途：我們需要能夠識別子列表中的更改。密鑰在react-redux應用程序中的作用以及管理動態組件的狀態

我遇到的問題是信息流，並保持我商店中的狀態與子組件狀態之間的同步性。

例如，假設我有一個列表<CustomTextInput>，這聽起來像是這樣。一些容器裏面有文字輸入。它們中的很多存儲在某個<CustomTextInputList>元素中。

列表中的CustomTextInput的數量可以更改，它們可以被添加和減去。我有一個帶增量計數器的工廠，每次插入CustomTextInput時都會發出新的密鑰，無論它放在哪裏。

我有一個CustomTextInputModel類型，它填充我的商店。每當我改變其中一個輸入內的值時，它就需要調用一個回調函數，它在我的商店中調度動作。但是，我怎麼知道要修改哪一個，以及如何確保整個列表不會因爲整個商店的狀態被重新創建而改變單個實例？我是否需要在每個CustomTextInput中存儲對某個型號ID的引用？這應該是關鍵嗎？

Manythanks，我很新的這:)

來源

2017-02-07 pixelpax

但後來我怎麼知道要修改的一個，我怎麼能肯定的是，整個列表不會更改重新渲染自從整個商店的狀態被重新創建以來的一個實例？

如果您的組件綁定到redux存儲中的對象列表，那麼它將重新呈現整個列表，因爲父組將獲取新的道具。但是有幾種方法可以避免重新渲染。

請注意，這是一個相當先進的帖子，但希望它有幫助。我發現this page可用於解釋一種方法，通過將每個項連接到redux存儲並通過通過prop傳入的id偵聽自身來渲染大型列表時，使react-redux應用程序更具性能。

編輯繼承人另一個很好的文章，說明了一點：https://medium.com/devtravel/optimizing-react-redux-store-for-high-performance-updates-3ae6f7f1e4c1#.3ltrwmn3z

裏面的減速器：

function items(state = {}, action) { 
    switch (action.type) { 
    case 'MARK': 
     const item = state[action.id]; 
     return { 
     ...state, 
     [action.id]: {...item, marked: !item.marked} 
     }; 
    default: return state; 
    } 
} 

function ids(state = [], action) { 
    return state; 
}

在列表容器：

<div> 
    { 
    ids.map(id => { 
     return <Item key={id} id={id} />; 
    }) 
    } 
</div> 

// Returns an array of just ids, not whole objects 
function mapStateToProps(state) { 
    return {id: state.ids}; 
}

裏面的項目組件：

// Uses id that is passed from parent, returns the item at the index equal to the id 
function mapStateToProps(state, props) { 
    const { id } = props; 
    const { items } = state; 
    return { 
    item: items[id], 
    }; 
} 

const markItem = (id) => ({type: 'MARK', id}); 
export default connect(
    mapStateToProps, 
    {markItem} 
)(Item);

我是否需要在每個CustomTextInput中存儲對某個模型ID的引用？

是的，您需要某種類型的key/id傳遞給redux動作，當您想對該特定項目進行修改時。

這應該是關鍵嗎？

引用redux存儲區中某些內容的最常用方法是使用id。

來源

2017-02-08 00:07:55

密鑰在react-redux應用程序中的作用以及管理動態組件的狀態

回答

相關問題