Question

我正在学习react及其最新功能钩子。我想使用钩子替换connect模块中的react-redux函数。我在想，如果我可以完全摆脱HOC，而无需修改我的动作/选择器文件。

在官方文档中，它说我不能在循环内使用钩子，因为每次调用钩子的顺序必须相同。但这是否意味着即使我使用循环，只要不跳过所有内容，我仍然可以使钩子起作用？

所以我尝试了一下，并且在没有出现任何错误或警告的情况下工作了

import { useDispatch, useSelector } from 'react-redux'
import React from 'react'

const selectors = {
  value: state => state.value
}

const actions = {
  setValue: value => ({
    value,
    type: actionTypes.SET_VALUE
  })
}


const useConnect = () => {
  const injectedProps = {}
  const dispatch = useDispatch()
  Object.entries(selectors).forEach(
    ([key, value]) => { injectedProps[key] = useSelector(value) } 
  )
  Object.entries(actions).forEach(
    ([key, value]) => { 
      injectedProps[key] = parameters => dispatch(typeof value === 'function' ? value(parameters) : value)
    } 
  )
  return injectedProps
}

const Container = () => {
  return <Component {...useConnect()}/>
}

const Component = props => {
  return <div>
    <div>{props.value}</div>
    <button onClick={ ()=>{ props.setValue(props.value + 1) } }>
      Click me
    </button>
  </div>
}

const initState = {
  value: 0
}

const reducer = (state = initState, action) => {
  switch (action.type) {
    case 'SET_VALUE':
      return {...state, value: action.value}
    default:
      return state
  }
}

这是使用钩子的有效方法吗？如果不是，使用遵循相同模式的多个钩子的最佳方法是什么，而我又不想到处复制和粘贴相同的东西？另外，我想知道是否有更好的方法将反应状态和动作分配给道具？

Thx

我可以在循环内使用React挂钩吗

0 个答案: