使自治的React/Redux組件可嵌入和分發

我正在構建一個React組件，該組件將通過npm分發。該組件使用終極版爲它的狀態，並具有以下案例：使自治的React/Redux組件可嵌入和分發

嵌入式作爲獨立組件定期網頁，其中組件本身是在陣營應用程序的根。
嵌入在一個更大的React應用程序中，其中<Provider>和Redux存儲已由其應用程序根目錄創建。

由於Redux要求在應用程序的根目錄下創建一個<provider>和存儲，我如何分配組件以便它可以同時使用？

2016-07-14 peterhry

這很有意思。但作爲一個想法，爲什麼不讓消費者能夠把你的組件reducer並把它放在商店中。當他想要集成你的組件時，只要給他提供關鍵點的地方就可以讓你的組件獲得道具從。

例如消費者創建自己的店減速器：

var rootReducer = combineReducers({ 
    someStuffReducer, 
    externalComponent: yourComponentReducer 
})

然後減速機的關鍵傳遞給您的組件：

<YourComponent stateKey="externalComponent" />

在你的組件，你可以採取ownProps和檢查stateKey is present：

// YourComponent mapStateToProps 
function mapStateToProps(state, ownProps) { 
    let stateKey = ownProps.stateKey || "yourDefaultKey" // or some logic.. you got the idea 
    return { 
    myComponentsState: state[stateKey] 
    }; 
}

這將提供一個簡單的w可以讓你的組件分佈，給你的用戶一點配置開銷，但事實上，如果他們使用Redux，它應該是小菜一碟。

正如結論

爲什麼你需要提供一個單獨的商店？它會產生更多的令人頭痛和編程開銷。你只需要你的reducer，包括在你的消費者的appStore，這就是它。

注

你ACTION_TYPES將是全球整個商店，但如果你給他們，例如前綴，並將它們寫入到README，那麼它是不是那麼糟糕，因爲你的消費者將能夠如果需要，將它們稱爲組件外部。

來源

2016-07-14 21:23:36 webdeb

你能解釋一下ACTION_TYPES的前綴或提供一個例子嗎？ – peterhry

如果context包含store passed on by Provider，則檢查組件。

如果是這種情況，那麼應用您的Redux特定邏輯。
如果不是這種情況，請管理您自己的本地狀態，但確實可以讓父母通過props對象處理程序，以便在需要交換數據時通知家長。

來源

2016-07-14 19:55:11 AlexandruB

使自治的React/Redux組件可嵌入和分發

回答

相關問題