React Hooks -Redux Saga Middleware

Question

我正在用Saga中间件创建一个React应用程序。我几乎没有什么疑问需要澄清。

• 在第一次装载时，我们为什么要破坏一个未知道具const { onGetPhonesAndTablets } = props，该道具不是从Redux存储(状态容器(传递的。

• 为什么在调度动作onGetPhonesAndTablets之前需要setPhoneAndTabletsList(phonesAndTablets)。由于道具phonesAndTablets将在调度动作后具有其值，即onGetPhonesAndTablets

const Home = props => {

const { 
phonesAndTablets
} = props

const [phonesAndTabletsList, setPhoneAndTabletsList] = useState([]);
useEffect(() => {
const { 
onGetPhonesAndTablets
} = props
setPhoneAndTabletsList(phonesAndTablets)
onGetPhonesAndTablets()
}, [])
useEffect(() => {
if (!isEmpty(phonesAndTablets)) setPhoneAndTabletsList(phonesAndTablets)
}, [phonesAndTablets])
return (
<React.Fragment>
<ProductCategoryList list={phonesAndTabletsList}/>
</React.Fragment>
)
}
Home.propTypes = {
phonesAndTablets: PropTypes.array,
onGetPhonesAndTablets : PropTypes.func
}
const mapStateToProps = ({ home }) => ({
phonesAndTablets: home.phonesAndTablets
})
const mapDispatchToProps = dispatch => ({
onGetPhonesAndTablets: () => dispatch(getPhoneAndTablets())
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)

Answer 1

我不完全确定为什么这个应用程序使用本地状态来存储redux状态，它是作为道具传递的。似乎是多余的，更不用说对性能不利了。

有一个选择器挂钩，它允许组件访问redux状态的各个部分。useSelector(state => state.home.phonesAndTablets)。

您还可以传递第二个参数shallowEqual，它使comparison函数进行值比较，而不是引用比较这样可以避免由于对象/数组而导致的不必要的重新渲染其内容相同，但其引用指向不同对象。请记住JS中的['a'] !== ['a']。

还有一个调度挂钩可以对操作执行同样的操作。useDispatch()。然后你可以做

const list = useSelector(state => state.home.phonesAndTablets, shallowEqual)
const dispatch = useDispatch()
useEffect(() => {
dispatch(getPhoneAndTablets())
}, [])
return (
<>
<ProductCategoryList list={list ?? []} />
</>
)

在获取新列表之前，我个人会添加一个检查列表是否为空，但也许每当安装Home时，应用程序都应该获取新列表。我不知道。

Answer 2

由于状态已经由state Container(Redux Store(管理和处理，因此上述代码似乎是多余的。所以我试着删除多余的代码。

就我个人而言，我更喜欢mapStateToProps而不是selectors。

const Home = props => {

const { 
phonesAndTablets, 
onGetPhonesAndTablets
} = props
useEffect(() => {
onGetPhonesAndTablets()
}, [])
return (
<React.Fragment>
<ProductCategoryList list={phonesAndTablets ? phonesAndTablets : ''}/>
</React.Fragment>
)
}
Home.propTypes = {
phonesAndTablets: PropTypes.array,
onGetPhonesAndTablets : PropTypes.func
}
const mapStateToProps = ({ home }) => ({
phonesAndTablets: home.phonesAndTablets
})
const mapDispatchToProps = dispatch => ({
onGetPhonesAndTablets: () => dispatch(getPhoneAndTablets())
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)