前端react-redux的问题,请问react事件函数以外的方式改变state时,react如何实现刷新?
发布于 8 年前 作者 yuxuan1101 7283 次浏览 来自 问答

尝试用socket.io做一个聊天室,前端使用react+redux。 现在当react组件触发的action都可以实现state改变后react自动刷新,但是当服务端推送的消息改变state后,react不会自动刷新。 ###reducer.js直接导出store:

const chatReducer = combineReducers({
chatContent,
inputBox,
userList
});
export let store = createStore(chatReducer);

###这是入口文件:

import ChatApp from '../chat/containers/ChatApp';
import {store} from '../chat/reducers';
import socket from '../chat/socketIO';

let rootElement = document.getElementById('root')
render(
    <Provider store={store}>
        <ChatApp />
    </Provider>,
    rootElement
)

###这是react组件触发state改变,react会自动刷新:

class ChatApp extends React.Component {
    render() {
        const { dispatch, chatContent, inputBox,userList } = this.props;
        return (
            <div className={styles.container}>
                //...
                        onSend = {(from,to,text) => dispatch(sendChatMessage(from,to,text))}
                    />
                //...
                </div>
            </div>
        )
    }
}

function select(state) {
    console.log(state.inputBox);
    return {
        chatContent: state.chatContent,
        inputBox: state.inputBox,
        userList: state.userList
    }
};

export default connect(select)(ChatApp);

###这是socketIO文件,这里改变state不会触发react自动刷新,明明使用的store都是reducer导出的,难道要使用react-reducer传递给组件props的dispatch才可以实现react自动刷新么?

import {store} from '../chat/reducers';

$(document).ready(function() {
    console.log(from);
    socket.emit('online', {user: from});
    socket.on('online', function (data) {
        console.log("online:");
        console.log(data);
        if(data.user === from) {
            store.dispatch(login(data.user));
        }
        console.log(state);
    });
})

##请问大家有没有什么好的办法实现state通过react事件函数以外的方式改变时,自动刷新react,还是只能另外写一个store.subscribe()? ##谢谢

3 回复

你这代码缺失太严重看不出来问题在哪里,socket.io 直接在 store 上面 dispatch 是肯定没问题的,事实上跟 socket.io 没关系, 谁调用 store.dispatch ,在什么时候调用都一样,它只管产生一个新的 state ,connect 之后相关的 component 已经 subscribe 好了,不用操心。装个开发工具吧,看下 state 时间线。观察下是不是 reducer 没处理好。 https://github.com/zalmoxisus/redux-devtools-extension

@klesh 谢谢了,我找到原因了,确实是reducer没有处理好。处理action时我在原有的state上修改后返回了。

回到顶部