尝试用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);
});
})
谢谢。
这个问题没有意义,我在其它地方的疏忽导致的问题。