首页 > react-redux关于服务端触发的state改变时react自动刷新的问题?

react-redux关于服务端触发的state改变时react自动刷新的问题?

尝试用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自动刷新么?
请问大家有没有什么好的办法实现state通过react事件函数以外的方式改变时,自动刷新react,还是只能另外写一个store.subscribe().

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);
    });
})

谢谢。

【热门文章】
【热门文章】