gpt4 book ai didi

javascript - 将嵌套的 Redux 智能组件与 reducer 连接起来

转载 作者:数据小太阳 更新时间:2023-10-29 03:54:58 24 4
gpt4 key购买 nike

与 Redux 的 ToDo 示例类似,我的项目结构也类似——只是一个容器,其中包含要显示的子组件数组。该商店将如下所示:

{
workspace: {
widgets: [1, 2, 3]
}
widgets: {
1: {
id: 1,
title: 'First Widget',
lastPrice: 123.324,
lastUpdate: '2015-11-12'
},
2: {
id: 2,
title: 'Second Widget',
lastPrice: 1.624,
lastUpdate: '2015-11-12'
},
3: {
id: 3,
title: 'Third Widget',
lastPrice: 4.345,
lastUpdate: '2015-11-12'
}
}
}

每个小部件项目本身就是一个复杂的组件 - 许多可能的操作、许多属性和许多子dumb组件。因此,我让每个小部件都成为一个连接的智能组件,带有专用的 WidgetReducer 以保持这些状态更改独立。

我希望 WidgetReducer 一次只关注一个小部件,因此它处理的状态将只是一个单独的小部件节点,例如:

{   id: 3,
title: 'Third Widget',
lastPrice: 4.345,
lastUpdate: '2015-11-12'
}

我的 Workspace 组件目前遍历所有 Widget,将 Widget ID 传递给每个 Widget 智能组件:

@connect(state => ({ workspace: state.workspace }))
export default class Workspace extends React.Component {
render() {
return (
<div>
{this.props.workspace.widgets.map(id =>
(<Widget key={id} widgetId={id} />)
)}
</div>
);
}
}

我的Widget组件是这样的:

@connect((state, ownProps) => ({ widget: state.widgets[ownProps.widgetId]}))
export default class Widget extends React.Component {
componentWillMount() {
this.props.dispatch(subscribeToUpdates(this.props.widgetId));
}

render() {
return (
<div>
<header>{this.props.widget.title}</header>
<div> /* Other widget stuff goes here */</div>
</div>
);
}
}

我如何连接每个 Widget 组件,以便它只接收关于它自己的 Widget 对象的状态更新,并且连接的 Widget Reducer 只关心单个 Widget 对象,而不是它们的集合?

最佳答案

首先看一下Reselect: https://github.com/rackt/reselect

如果我理解这个问题,这就是您要查找的内容。假设 widget-id 2 的状态发生变化,widget 1 和 widget 3 不关心 widget-id 2 的状态发生变化。只有小部件 2 需要反射(reflect)该更改。 Reselect 使您能够构建“记忆化”的选择功能。 This may sound like a fancy word, but in practice it means that only if the input value of a selector changes, it'll calculate the next state.

在小部件示例中,您将构建选择函数,如果它所关注的状态片段发生变化,这些函数只会重新计算状态。

可能的例子:

import { createSelector } from 'reselect'

const widgetByIdSelector = (state, props) => state.widgets[props.widgetId]
// this is the `input` function for you selector: as input we take the
// specific slice of state a specific widgetId requests.
// the main idea is: only if the `input` of this function changes, it'll 'reselect' that state.

export const widgetSelector = createSelector(
widgetByIdSelector,
(widgetById) => {
return { widgetById }
}

@connect(widgetSelector)
export default class Widget extends Component { ... }

我不知道这段代码是否有效,是在互联网连接不稳定的火车上写的,但这是主要想法......

对于 reducer 和 action creators(你可能会做这样的事情):

export function createActionForSpecificWidgetById(widgetId, payload) {
return {
type: ACTIONS.HERE_COMES_YOUR_ACTION_TYPE,
widgetId,
payload
}
}

function reducer(state = initialState, action) {
switch(action.type) {
case HERE_COMES_YOUR_ACTION_TYPE:
//now you can modify the state of the specific widgetId because you have access to the id at action.widgetId
}

这就是您要找的吗?

关于javascript - 将嵌套的 Redux 智能组件与 reducer 连接起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33728901/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com