Redux асинхронные действия и просмотр обновлений - PullRequest
Новая
       11

Redux асинхронные действия и просмотр обновлений

1 голос
/ 17 июня 2019

Я пытаюсь реализовать форму входа для веб-сайта, это мой первый проект на React, поэтому я довольно новичок.

Для этого я использую socket.io-client внутри моего редуктора. Дело в том, что он не обновляет локальный реквизит правильно.

Вот код моего взгляда: 

const mapStateToProps = state => {
    return {
        profile: state.profileReducer.profile
    }
}

const mapDispatchToProps = dispatch => {
    return {
        dispatch: action => {
            dispatch(action)
        }
    }
}

...

handleConnection = () => {
    const { profile } = this.props

    this.props.dispatch({ type: 'CONNECT_USER' })

}

...

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)

А вот действие редуктора: 

import io from 'socket.io-client'

const host = [SERVER_URL]

const socketConnection = io.connect(host, {path: [PATH], secure: true})

const initialState = {
    profile: {
        token: null,
        username: '',
        password: ''
    }
}

function profileReducer(state = initialState, action) {
    switch(action.type) {

        ...

        case 'CONNECT_USER':
            let tempProfile = {...state.profile}

            socketConnection.emit('login', tempProfile.username + ';' + tempProfile.password)

            socketConnection.on('check', msg => {
                if (msg !== null && msg !== '')
                    tempProfile.token = msg

                return {
                    ...state,
                    profile: tempProfile
                }
            })

            return state

        ...
    }
}

Действие сокета 'check' возвращает сообщение, содержащее токен подключения пользователя, который мне нужно сохранить, чтобы убедиться, что подключение установлено и разрешено. Дело в том, что он не обновляет значение магазина. Если я обновляю непосредственно состояние редуктора вместо временного профиля, это отчасти работает: реквизиты представления не обновляются должным образом, но «console.log (профиль)» в «setInterval» внутри функции «handleConnection» показывает значение токена (но реквизиты в Chrome React Inspector не обновляются).

Я действительно не понимаю, что происходит. Я полагаю, что функция socket.io 'on' не была выполнена до 'return' моего действия, но я не знаю, как с этим справиться.

Есть ли у кого-нибудь идеи как я мог решить эту проблему?

Спасибо!

1 Ответ

0 голосов
/ 17 июня 2019

Редукторы всегда синхронны по своей природе. Если вы хотите выполнить асинхронную операцию (например, соединение с сокетом, которое вы пытаетесь установить) в своем редукторе, вам нужно использовать промежуточное программное обеспечение, такое как Thunk или Saga , чтобы добиться того же.

В вашем случае он всегда возвращает существующее состояние из последнего оператора return.

...