基于 redux/react 的容器的可重用性

Question

我没有找到任何文章正确解释了这样做的方法。所以问题如下。想象一下，你有一个连接到 redux store 的 react 容器，并与一个 BE 通信。现在您需要在多个页面和（最坏的情况）列表中重用它。那么你将如何使用动作、选择器和减速器来实现这一点。我现在使用的解决方案是可怕的尖峰，它们将每个容器都紧紧地压在应用程序架构上，我想不出比这更糟糕的了。最好的情况是为每个容器创建新的 redux 实例。这有点工作，但会导致我们遇到其他问题，并让我考虑反应上下文与 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

如果我正确理解您对@Fleezy 的回复，我想您可能正在寻找类似的东西（简化版）。

组件

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

您应该能够通过添加一个 get 传递的 ID 变量来重构您的标准设置来实现您想要做的事情。