尝试用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()? ##谢谢
你这代码缺失太严重看不出来问题在哪里,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上修改后返回了。