Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342

React Thunk и обновление компонентов

21.09.2018, 18:30. Показов 2291. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравтсвуйте!

Разбираюсь в redux-thunk.

JavaScript
1
2
3
4
5
6
export const someAction = () => {
    return dispatch => {
        dispatch(actions.action1());
        dispatch(actions.action2());
    }
};
В соответствующем reduce я вывожу текущий action.type.
В Компоненте:

JavaScript
1
2
3
    componentDidMount() {
        this.props.callAction();
    }
Собственно, ожидаю вывод в консоли:
JavaScript
1
2
3
4
5
render 
action1 //После стартового рендера отрабатывает первый dispatch
render  // Состояние поменялось, нужен рендер 
action2 //Отработка второго dispatch
render  //// Состояние поменялось, нужен рендер
А в итоге получается вот что:
JavaScript
1
2
3
4
render
action1
action2
render
ПОЧЕМУ ПОСЛЕ диспатча нет перерисовки???
Получается, что перерисовка начинается только после всего action
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.09.2018, 18:30
Ответы с готовыми решениями:

Обновление свойств компонентов на обновление состояния родителя
Компонент Clock отрисовывается 500 раз. Внутри тикает таймер и когда компонент один - все ОК. Но когда их 500 (по всем временным...

JS React обновление классового компонента
Следующая ситуация: при рендере классовый компонент реакта получает на вход параметром массив. Один из методов класса добавляет в этот...

Обновление данных firebase в React приложении
Доброго времени суток!) Интегрирую в React-приложение типа todo-list подключение к Firebase. Получаю данные и добавляю их в state в...

10
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
21.09.2018, 22:24
Получается да)

Добавлено через 1 минуту
Ваше желание ререндерить компонент сразу после начального рендера - выглядит не очень логично. Зачем тратить ресурсы на не нужные рендеры?
1
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342
21.09.2018, 23:26  [ТС]
msheal,например, первый диспатч устанавливает состояние на isLoading = true ,чтобы компонент отрисовал иконку загрузки. Далее я подргужаю нужные данные и второй диспатч устанавливает isLoading = false, чтобы компонент отрисовал данные. Суть в том, что диспатч поменял store, но компонент не отрисовался. Тогда как мне решать задачу с иконкой "данные загружаются" ?
Во всех туториалах делают 3 состояния выполнения операции:
isLoading
Success
Error

Я не пойму зачем менять store, если это не изменить внешний вид компонента?

Добавлено через 44 минуты
Я проверил, reducer вызывается и меняет состояние, а вот рендеринг после редьюсера не вызывается

render
reducer
action1
reducer
action2
render
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
21.09.2018, 23:27
покажите экшены, редьюсеры и контейнер, который подписан на стор
1
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342
22.09.2018, 00:00  [ТС]
Тут Экшены + Редьюсер

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const ACTION_REQUEST = "action/request";
const ACTION_SUCCESS =  "action/success";
 
 
const actionRequest = () => {
    return {
        type: ACTION_REQUEST,
        payload: {
            isLoading: true
        }
    }
};
 
 
const actionSuccess= (user) => {
    return {
        type: ACTION_SUCCESS,
        payload: {
            isLoading: false,
            Data: 'Fetched data'
        }
    }
};
 
 
export const exampleOperation = () => {
    return dispatch => {
        dispatch(actionRequest());
        setTimeout(() => {
            dispatch(actionSuccess());
        }, 1000);
    }
};
 
const initialState = {
    isLoading: false
};
 
export function exampleReducer(state = initialState, action) {
    switch (action.type) {
        
        case ACTION_REQUEST:
            console.log(action);
            return {
                ...state,
                ...action.payload
            };
            
        case ACTION_SUCCESS:
            console.log(action);
            return {
                ...state,
                ...action.payload
            };
        
        default:
            return state;
    }
}
Вот сам компонент:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Example extends Component {
    
    componentDidMount() {
        this.props.exampleOperation();
    }
    
    render() {
        console.log('render');
        return (<h1>Example</h1>);
    }
}
 
 
const mapStateToProps = (state) => {
    return {
        example: state.exampleReducer
    };
};
 
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({exampleOperation}, dispatch);
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Example);
Добавлено через 2 минуты
Собственно нашел проблему!

Вот так код не работает:
JavaScript
1
2
        dispatch(actionRequest());
        dispatch(actionSuccess());
А так, все нормально:

JavaScript
1
2
3
4
        dispatch(actionRequest());
        setTimeout(() => {
            dispatch(actionSuccess());
        }, 1000);

Тогда у меня вопрос: Как огранизовать работу вот такого кода

JavaScript
1
2
3
4
5
6
7
8
    return dispatch => {
        dispatch(actions.verifyRequest());
        
        const authData = getFromLocalStorage('auth');
        if (!authData || !authData.token) {
            dispatch(actions.verifyFail());
            return;
        }
НЕ ставить же нулевой SetTimeout ?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
22.09.2018, 00:10
Цитата Сообщение от Kertis138 Посмотреть сообщение
Вот так код не работает
на самом деле код правильно работает - он страхует разработчика от ненужных рендеров, как я и писал выше. Если вы одновременно диспатчите несколько простых (синхронных) экшенов, то редакс обновит стор лишь раз, как бы смержив все эти экшены в один
1
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342
22.09.2018, 00:11  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
Если вы одновременно диспатчите несколько простых (синхронных) экшенов, то редакс обновит стор лишь раз, как бы смержив все эти экшены в один
То есть в моем случает через SetTimout(fn, 0) делать?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
22.09.2018, 00:15
Цитата Сообщение от Kertis138 Посмотреть сообщение
Как огранизовать работу вот такого кода
этот код будет работать верно. Что в этом участке кода по вашему мнению работает некорректно?

Добавлено через 2 минуты
Цитата Сообщение от Kertis138 Посмотреть сообщение
То есть в моем случает через SetTimout(fn, 0) делать?
я в упор не вижу проблему, сори. Зачем здесь нулевой таймаут? Чтобы вызвать повторный рендер компонента?
1
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342
22.09.2018, 00:16  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
Чтобы вызвать повторный рендер компонента?
Первый диспатч меняет isLoading на true, что должно заставлять, например, кнопку становиться неактивной пока данные не загрузятся (вот тут нужен рендер).
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
22.09.2018, 00:29
Лучший ответ Сообщение было отмечено Kertis138 как решение

Решение

Kertis138, на примере вашего кода
JavaScript
1
2
3
4
5
6
7
8
return dispatch => {
        dispatch(actions.verifyRequest()); // 1) полагаю этот экшен лочит кнопку (меняется стор)
        
        const authData = getFromLocalStorage('auth'); // 2) данные из локал сторейджа достаются синхронно и моментально
        if (!authData || !authData.token) { // проверка проходит тоже моментально
            dispatch(actions.verifyFail()); // 3) вероятно тут кнопка разлочивается (меняется стор)
            return;
        }
Как видно из вашего кода, здесь нет асинхронных операций, код выполняется последовательно и моментально. Какой смысл лочить кнопки на время выполнения этого синхронного кода?

Добавлено через 7 минут
Допустим у вас было бы так:
JavaScript
1
2
3
4
5
6
7
8
return dispatch => {
        verifyRequest() // 1) асинхронная операция, например серверная валидация
        .then(response => {
const authData = response.auth; // 2) используем данные из респонса
        if (!authData || !authData.token) {
            dispatch(actions.verifyFail()); 
        }
}),
тогда был бы смысл делать промежуточные вещи типа лока кнопок, показ спиннеров, вывода надписи "загрузка" и т.д. - ибо verifyRequest в этом случае асинхронен (читай - выполняется неопределенное время)
1
6 / 6 / 1
Регистрация: 25.02.2016
Сообщений: 342
22.09.2018, 00:31  [ТС]
Цитата Сообщение от msheal Посмотреть сообщение
Какой смысл лочить кнопки на время выполнения этого синхронного кода?
Да, js то не даст ничего сделать, потому что поток заблокирован Спасибо! Теперь разобрался

Добавлено через 1 минуту
Цитата Сообщение от msheal Посмотреть сообщение
тогда был бы смысл делать промежуточные вещи типа лока кнопок, показ спиннеров, вывода надписи "загрузка" и т.д. - ибо verifyRequest в этом случае асинхронен (читай - выполняется неопределенное время)
Спасибо за разъяснения! Все стало на свои места
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
22.09.2018, 00:31
Помогаю со студенческими работами здесь

Обновление/отрисовка компонентов в Runtime
Доброго времени суток! Имеется такая задачка: на форме лежит панель pBlocks, на ней - несколько панелек (pBlock1, pBlock2, pBlock3) с...

Обновление всех переменных и свойств компонентов формы
Вобщем такое дело. Вот например на форме меняю button1.Enabled на false. И как сделать что бы при нажатии на кнопку обновлялись все...

Обновление не всей программы, а лишь отдельных ее компонентов
Доброго времени суток! Интересует вопрос, возможно ли изменять программу не всю полностью, а только некоторую ее часть. Допустим есть...

"React/React-Native Developer"
MaxyLogic is the small team of dedicated software engineers that was founded with the idea to provide the best-matching quality software...

Разработка приложений с использованием стандартных и дополнительных компонентов. Динамическое создание компонентов.
Здравствуйте! Помогите мне, пожалуйста. Условие задачи состоит в следующем: из списка выбираю фигуру(например, круг). Далее открывается...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru