Question

与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'
        }
    }
}

每个小部件项目都是一个复杂的组件 - 很多可能的操作，许多属性和许多儿童哑组件。因此，我已经使每个小部件成为一个连接的智能组件，并使用专用的WidgetReducer将这些状态更改分开。

我希望WidgetReducer一次只关注一个小部件，因此由它处理的状态只是一个小部件节点，如：

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

My Workspace组件当前遍历所有Widgets，将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>
        );
    }
}

My 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对象，而不是它们的集合？

Answer 1

首先来看看Reselect： https://github.com/rackt/reselect

如果我理解这个问题，那就是你要找的。让我们说widget-id 2的状态发生变化，widget 1和widget 3不关心widget-id 2的状态发生了变化。只有小部件2需要反映该更改。重新选择使您有能力建立记忆的＆＃39;选择功能。这可能听起来像一个奇特的词，但在实践中它意味着只有当选择器的输入值改变时，它才会计算下一个状态。

在小部件示例中，您将构建选择函数，这些函数仅在与其关注的状态切片发生更改时才重新计算状态。

可能的例子：

src/main/java

我不知道这段代码是否有用，在火车上写的这个代码连接不稳定，但这是主要的想法......

减速机＆amp;动作创作者（你可能会做这样的事情）：

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连接嵌套的Redux智能组件

1 个答案: