Question

我正在尝试为网站实现登录表单，这是我在React上的第一个项目，所以我是一个初学者。

为此，我在redux reducer中使用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'套接字操作返回一条消息，其中包含我需要存储的用户连接令牌，以确保已完成并允许连接。问题是，它不会更新商店的价值。如果我直接更新化简器的状态而不是临时概要文件，则部分起作用：视图道具未正确更新，但“ handleConnection”函数内“ setInterval”中的“ console.log（profile）”显示令牌值（但Chrome React Inspector中的道具未更新）。

我真的不明白发生了什么。我想socket.io的“ on”功能在动作“返回”之前没有完成，但是我不知道如何处理。

有人可以解决我的问题吗？

谢谢！

Answer 1

减速器本质上总是同步的。如果要在化简器中执行异步操作（例如您要建立的套接字连接），则需要使用 Thunk 或 Saga 之类的中间件来实现一样。

对于您而言，它总是从最后一个return语句返回现有状态。

Redux异步操作并查看更新

1 个答案: