多次使用效果设置 Redux 状态

Question

我是 React 中的新手，正在尝试创建一个聊天应用程序，在我的应用程序中有频道部分 现在这里是我为获取频道所做的工作

const [Channels, setChannelState] = React.useState([]);
const ref = firebase.database();
const loadedChannels = [];
React.useEffect(() => {
ref.ref("channels").on("child_added", snap => {
loadedChannels.push(snap.val());
setChannelState([...loadedChannels]);
});
}, []);

每当添加新通道时，它都会更新本地状态

所以我的问题在这里，我希望在页面加载时它基本上从通道状态数组(即通道(获取第一个通道并将其设置为 redux 全局状态

这是我的调度员

const mapDispatchToProps = dispatch => {
return {
SetFirstChannel: channel => {
dispatch({ type: "SET_FIRST_CHANNEL", payload: channel });
}
};
};

在我的减速器中：

const iState = {
currentChannel: ""
};
export const rootReducer = (state = iState, action) => {
return {
currentChannel: action.payload
};
};

现在我如何从通道数组中获取第一个元素并存储到 Redux 中

到目前为止，我在这里做了什么.. https://codesandbox.io/embed/quiet-wind-g9zxx 但这会导致多次设置 Redux 状态

Answer 1

如果您每次都只想要第一个频道，并且仅在第一个频道更改时才更新它，那么像这样的事情应该可以工作：

React.useMemo(() => props.SetFirstChannel(Channels[0]), [Channels[0]]);

我在本地设置并检查了它。让我知道它是否有效。干杯！