如何将React本地状态存储到Redux全局存储(HOOKS)

Question

const initReactiveProperties = (user: any) => {
//TODO: change 'any' to customized interface
user.connected = true;
user.messages = [];
user.hasNewMessages = false;
setConnectedUsersList((prevUsers: any) => [...prevUsers, user]); //setting the connected users in state
};
// storing connected users
const setConnectedUsers = () => {
socket.on("users", (users) => {
users.forEach((user: any) => {
user.self = user.userID === socket.id; // if the user is the authenticated user
initReactiveProperties(user);
});
users = users.sort((a: any, b: any) => {
if (a.self) return -1;
if (b.self) return 1;
if (a.username < b.username) return -1;
return a.username > b.username ? 1 : 0;
});
});
};
// after new user connects, store it in an array
const storeNewUser = () => {
socket.on("user connected", (user) => {
initReactiveProperties(user);
// dispatch({ type: CONNECTED_USERS, payload: connectedUsersList });
});
};
useEffect(() => {
setConnectedUsers();
storeNewUser();
dispatch({ type: CONNECTED_USERS, payload: connectedUsersList });
}, []);

connectedUsersList获取所有当前连接的用户，我想更新我的redux全局存储中的usersList，但它不会立即作为connectedUsers List以redux状态存储。但事实并非如此。

Answer 1

如果您希望在redux用新的connectedUsersList更新后做一些事情，可以使用useEffect。

const usersListFromRedux = useSelector(state => state.usersReducer.usersList)
useEffect(() => {
...do something
}, [usersListFromRedux]);