我对Redux还是很陌生,并且遇到了一些问题。
我正在创建组件中的项目列表,将其发送到redux状态,然后我想从该redux状态中读取并在其他列表组件中显示项目。
创建部分可以console.log
和getState()
正常工作,而不会出现问题(我看到Redux State的更改)。
我的问题是我的组件状态没有改变,也没有重新呈现。
现在有一些代码->
this.state = {
initialItems: this.props.SharepointItems,
}
最后
const mapStateToProps = (state) => {
return {
SharepointItems: state.listItems,
}
}
export default connect(mapStateToProps)(SharePointList);
我甚至在componentDidMount()
->
store.subscribe(() => {
this.setState({ initialItems: this.props.SharepointItems });
console.log("updating state");
});
从我所读的内容中,我不需要在使用redux时手动更新状态,还是我错了?
编辑:由于如果我console.log
,我的列表不会抛出错误,所以我可以看到该数组为空(这是我在Redux状态下定义的)。我需要做些什么才能获得新状态?好像它得到了不可变状态或类似的东西(空数组)。
Edit2:发现了问题(或部分问题)。似乎我的状态落后1个事件。因此,redux包含具有4个项目的数组,组件状态为空。如果我从浏览器中进行分派,则会在redux中获得5个项目(如预期),但状态为4个(最终显示为非空)。
我的代码也有问题(我正在传递整个数组而不是数组中的项目)。
我将其更改为
result.map((item) => {
store.dispatch(addListItem(item));
});
它开始渲染。问题在于它显示的项目从0到2(数组中为4),但是最后一个项目被遗忘了。再一次,如果我从浏览器中进行另一次调度,我将呈现第3项,但第4项(最后添加的第4项)仅处于还原状态,而不会更新列表状态。
也...这样做是个好主意吗?我的列表将来可能有1000个项目,我不确定分派是否是一个好的解决方案(我需要先进行API调用才能首先获得项目,这就是为什么我要使用分派来填充redux)。>
已通过reducer更新->
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_LISTITEM:
return { ...state, listItems: [...state.listItems, action.payload] };
case ADD_SPOTOKEN:
return { ...state, spoToken: action.payload };
default:
return state;
}
};
export default rootReducer;
发现其他东西有点奇怪。我也在使用React Router。如我所说,我的列表仅显示Redux State阵列中4个项目中的3个。如果我导航到其他页面,然后返回列表页面,则实际上会渲染所有4个项目。
答案 0 :(得分:0)
我认为您的问题源于以下事实:您已经从SharepointItems
中“分支”了props
并将其设置为组件的本地this.state
。除非您真的需要,否则我建议您不要这样做。只需使用this.props
。 Dan Abramov (author of Redux) recommends this as a general principle too。
通过将道具分叉到状态上,您可以创建关于SharepointItems
状态的两个事实来源,即this.state.initialItems
和this.props.SharepointItems
。然后,您有责任通过实现this.state
使this.props
和componentDidUpdate
保持同步(这就是为什么您看不到它更新的原因)。您只需使用从props
流入的数据,就可以避免所有额外的工作。
无论何时更新connect
存储,props
函数都会用新的redux
重新渲染组件。因此,在您的render
方法中,仅引用this.props.SharepointItems
而不是this.state.initialItems
。然后,您应该会很好,也就是说,假设您已实现了reducer并正确存储了配置。
答案 1 :(得分:0)
我实际上是错误地解决了这个问题。我打算将其保留到最后,并找到解决方法,但是我以某种方式解决了该问题。
我正在将页面组件(具有redux状态道具)导入到页面(反应路由器)中。该页面尚未连接,因为尚未准备好。显然,在连接页面(保存列表的父组件)之后,一切正常,我可以看到所有4个项目(而不是在没有连接父项的情况下看到3个项目)。
我想知道这是否有意...