Лучшая практика React-Redux: компонент без состояния с обновлением redux при вводе onChange против компонента statefull и обновление redux только в форме onSubmit - PullRequest
Новая
       10

Лучшая практика React-Redux: компонент без состояния с обновлением redux при вводе onChange против компонента statefull и обновление redux только в форме onSubmit

0 голосов
/ 29 мая 2020

My React SPA состоит из одного большого состояния редукции. Пользователь будет щелкать путь к приложению и вводить различные данные на разных страницах (например, на странице 1 он вводит свою личную информацию, на странице 2 - свой адрес, ...). После перехода на следующую или предыдущую страницу входная информация сохраняется в redux. В случае, если пользователь возвращается на ту же страницу, поля ввода должны быть предварительно заполнены информацией, ранее сохраненной в redux.

Каждая страница состоит из полей ввода. На мой взгляд существует два основных c подхода к тому, как реализовать управление состоянием и информационный поток между полями ввода на отдельных страницах и хранилищем redux. Первая версия использует локальное состояние и, следовательно, «гораздо менее скудна», но ограничивает количество обновлений redux, а вторая версия не требует локального состояния , поэтому она более компактная, но имеет гораздо более частые обновления redux. Существует ли обычно рекомендуемый способ того, как это сделать в отношении требований к производительности и чистому коду?

  1. Версия: Каждый компонент страницы содержит локальное состояние . Это состояние содержит входную информацию, пока пользователь печатает. Это локальное состояние инициализируется из redux только при загрузке страницы и обновляет redux только в форме onSubmit (которая будет вызываться, если пользователь перейдет на следующую страницу). 
// Simplified statefull page component

const page = props => {
    const [state, setState] = useState({
        firstname: '',
        lastname: '',
        ...
    }

    useEffect(() => {
        setState({
            ...state,
            firstname: reducers.firstname,
            lastname: reducers.lastname,
            ...
        });
    }, []);

    return(

        <form 
            onSubmit={() => {
                actions.updateRedux(state);
                goToNextPage();
            }}
        >

            <input
                value={state.firstname}
                type='text'
                onChange={newInput => {setState({...state, firstname: newInput})}}
                ... />

        </form>

    );
Версия: Каждый компонент страницы не имеет состояния . Значение поля ввода будет инициализировано непосредственно из redux, и при каждом вводе onChange redux будет обновляться 
// Simplified stateless page component

const page = props => {
    return(

        <form 
            onSubmit={() => {
                goToNextPage();
            }}
        >

            <input
                value={reducers.firstname}
                type='text'
                onChange={newInput => {actions.updateRedux({firstname: newInput})}}
                ... />

        </form>

    );
...