在React组件中dispatch而不触发render

开发时遇到了一个问题，具体场景是需要将一个React组件的props同步到redux的store上：

const De = React.memo((props) => {
    const data = useSelector(state => state);
    const dispatch = useDispatch();
    useMemo(() => {
        dispatch({
            type: 'demo',
            payload: props
        })；
    }, [dispatch, props])
    console.log(data) // 会打印两次
    return <div>{JSON.stringify(data)}</div>
});

代码本身没什么问题，但是这样会造成组件被执行2次。很明显第一次的执行是没必要的，如果优化掉呢？看了redux和react-redux的源码也没有找到好方法。。。

回家的路上突然开窍了。只需要掉下dispatch和useSelector的位置应该就行了。因为redux，react-redux里全同步执行的，无异步代码。而组件订阅store变更是在useSelector里订阅的。

const De = React.memo((props) => {
    const dispatch = useDispatch();
    useMemo(() => {
        dispatch({
            type: 'demo',
            payload: props
        })；
    }, [dispatch, props])
    const data = useSelector(state => state);
    console.log(data) // 仅打印一次
    return <div>{JSON.stringify(data)}</div>
});

一般来说大家写代码useSelector都是放在组件最开始的地方的，写多了思想被固话了，忽略了其实这并不是一个必要条件。

看来有想不通的问题时，出去走走确实是个好办法。