Question

我没有找到适当的文章来解释这样做的方法。因此，问题如下。假设您已将React容器连接到redux存储，并与BE通信。现在，您需要在多个页面和列表中（最坏的情况）中重用它。那么，您将如何使用动作，选择器和缩减器来实现这一目标。我现在正在使用的解决方案令人毛骨悚然，它们将每个容器紧紧地束缚在应用程序体系结构上，以至于非常糟糕，我认为没有比这更糟的了。最好的情况是为每个容器创建新的redux实例。那种方法行得通，但是却导致我们遇到其他问题，并且让我考虑了响应上下文与还原。如果您有这样的问题，请分享您的想法。您是如何解决的？

Answer 1

不确定我是否100％理解了您的问题，如果我错了，请纠正我。您有一个链接到redux状态的容器，您想多次重用它而不每次都获取数据吗？

您可以将该容器包装到另一个容器中。包装器将负责获取数据（例如在安装时）。这将更新您的redux状态，然后您的容器将具有新数据。一次BE通话。

编辑：

function getData(id) {
    // Call to backend
    dispatch({ type: 'GET_DATA', payload: { id: id, item: response } })
}

export default function reducer(state, action) {
    switch (action.type) {
        case 'GET_DATA':
            return {
                ...state,
                items: { ...state.items, [action.payload.id]: action.payload.item },
            }
         }
    }
}

Answer 2

如果我正确理解了您对@Fleezey的答复，我认为您可能正在寻找类似的东西（简化版本）。

组件

class Container extends Component {
  ...
  someHandler = ({safeId, params}) => dispatch.someAction({safeId, params})

  render() {
    return <p onClick={this.someHandler({safeId, params})}>Model Stuff</p>
  }
}

export default connect(store => {
  const safeId = this.props.model.id.toString()

  [safeId]: store.content[safeId]
})(Container)

减速器

const content = (state ={}, action) => {
  const safeId = action.safeId.UpperCase()

  switch (action.type) {
   case `SOME_${safeId}_CONTENT`:
     return myContentFunc(state, action)
   default:
    return state
  }
}

通过添加传递给您的ID变量来重构标准设置，您应该能够实现您想要的目的。

基于Redux / React的容器的可重用性

2 个答案: