1 回答

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊
以下是您必須解決的問(wèn)題才能使其正常工作:
語(yǔ)法錯(cuò)誤:
在
onClick
,this.props.someTab.active:
應(yīng)該只是active:
mapStateToProps
,mapDispatchToProps
并且connect
應(yīng)該移到Tabs
組件之外你錯(cuò)過(guò)了一個(gè)
{
以前this.props.items[this.prop.someTab.active]
一旦你修復(fù)了這些,你仍然會(huì)得到一些錯(cuò)誤,因?yàn)槟阍噲D訪(fǎng)問(wèn)不存在的道具的屬性。Tabs
沒(méi)有連接到商店,所以您擁有的唯一道具是items
. 添加inconsole.log(props)
的第一行以了解我的意思。render
Tabs
如何修復(fù) Redux 錯(cuò)誤:
您需要將您的商店傳遞給您的提供商:
<Provider store={store}>
您正在調(diào)用連接,但沒(méi)有將您的組件連接到 Redux。修復(fù):
class Tabs extends Component {...}
const ConnectedTabs = connect(mapState, mapDispatch)(Tabs);
...
<Provider store={store}>
<ConnectedTabs />
</Provider>
mapStateToProps
應(yīng)該返回一個(gè)對(duì)象,其屬性對(duì)應(yīng)于您的組件期望的道具,而不是減速器名稱(chēng)。在這種情況下:return { someTab: state.oneReducer.someTab }
現(xiàn)在您應(yīng)該看到一個(gè)沒(méi)有錯(cuò)誤的頁(yè)面。我們還沒(méi)有完成!
在
mapDispatchToProps
你需要調(diào)用你傳遞給的函數(shù)dispatch
,特別是用你在組件中傳遞的參數(shù)調(diào)用它:
return { changeTab: change => dispatch(changeTab(change)) };
或者只是使用對(duì)象形式mapDispatch
:
const mapDispatchToProps = { changeTab } // it works!
在您的減速器中,您正在添加一個(gè)
state.change
屬性,當(dāng)您想要更新state.someTab.active
. 你可以 returnObject.assign({}, state, { someTab: { active: action.change.active } })
,或者讓它更簡(jiǎn)單:去掉對(duì)someTab
do的引用Object.assign({}, state, { active })
。
這應(yīng)該可以讓您大體上到達(dá)您想去的地方。
一些簡(jiǎn)化事情的建議:
此時(shí)你也真的不需要多個(gè)減速器。你真的可以直接
reducer
進(jìn)入createStore
,并擺脫對(duì) . 的引用oneReducer
。您使用的唯一組件方法是
render
,因此您可以使用函數(shù)組件而不是類(lèi)組件。(this.props
將成為props
)你不需要
data-index
,你可以做onClick={() => props.changeTab({ active: i })}
另一個(gè)注意事項(xiàng):您可以搬進(jìn)items
商店。你仍然可以通過(guò) props 訪(fǎng)問(wèn)它們,所有相關(guān)的狀態(tài)都將保存在一個(gè)地方,這是 Redux 的優(yōu)勢(shì)之一。
祝你好運(yùn)!
添加回答
舉報(bào)