Почему в useState не приходит значение? Ассинхронщина?

Question

[bzotsss]

Всем привет , может кто подсказать почему в useState не приходит значение statusText ? Я понимаю что тут дело связанно скорее всего с асинхронщинной но не понимаю как это обьяснить и что нужно сделать что бы всё работало как я задумал . Если кому не сложно можете пожалуйста подсказать / кинуть что то почитать по этой теме ? Ибо как я понял useState выполняется быстрее useSelector , так что ли выходит ? В statusText значение приходит как и нужно.

const ProfileStatus = () => {
    const dispatch = useDispatch()  
    useEffect(() => {
        dispatch(getStatusThunk())
    }, [])
    const statusText = useSelector(store => store.profilePage.profileStatus)
    const [editMode,
        setEditMode] = useState(false)
    const [status,
        setStatus] = useState(statusText)
    return (
        <div>
            <div>
                <img alt="user photo" src={userImg} />
            </div>
            <div>
                <span>{status}</span>
                <button onClick={() => setEditMode(!editMode)}>Change Status</button>
                <button onClick={() => dispatch(updateStatusThunk())}>Save Status</button>
            </div>
            <div>
                {editMode
                    ? <input
                        onChange={(e) => {
                            let text = e.target.value;
                            setStatus(text)
                        }}
                        value={status} />
                    : null}
            </div>
        </div>
    );
}
export default ProfileStatus;

Answer 1

[Alexandroppolus]

в useState приходит statusText, но useState запоминает его только первый раз, при создании компонента. После чего есть два статуса - тот, который в useState, и тот который в редуксе. И они никак не взаимодействуют между собой. Т.е. когда getStatusThunk обновляет статус в редуксе, статусу состояния на это пофиг.
Тут надо определиться - либо юзать только редуксовый статус, либо синхронизировать их между собой. Зависит от задачи.

Comments

[bzotsss]

Как их можно синхронизировать между собой ? Можете пожалуйста подсказать какие есть варианты

[Alexandroppolus]

Обычно значение из редукса подхватывается в useState через useEffect. Вообще, тут useState требуется только если редактируемый текст - некий черновик, который поедет в редукс по нажатию на кнопку "Save Status". Тогда в updateStatusThunk надо его передавать.