Firebase Redux update not triggering render - reactjs

Question

My react app isn't re-rendering when updating my data. I think its related to updating the state with an array, but I can't quite figure out exactly what is causing the issue.
Here is my action
export const fetchChannels = uid => dispatch => {
db.ref(`chat/userchats/${uid}`).on("value", snapshot => {
if (snapshot.exists()) {
let userchats = snapshot.val()
let channels = []
Object.values(userchats).map(function(chat, i) {
db.ref(`chat/chats/${chat}`).on("value", snap => {
let chatData = snap.val()
channels.push(chatData)
})
})
dispatch({
type: "FETCH_CHANNELS",
payload: channels
})
}
})
}
And my reducer
case 'FETCH_CHANNELS':
return {
...state,
channels:action.payload
}
Since channels is set to an empty array, I'm guessing that redux is not recognizing this as a change of state? But can't quite get the right fix.
Edit
I console.logged snapshot.exists() prior to the if statement, and that came back as True.
I also logged channels prior to the dispatch and this seems to be where there is an issue. channels does not return the updated values, but rather the previous values when updated.
Here is the code I am using to add the channel item to userchats. The action I am looking for is that a user creates a channel, which creates a channel with the member uid's and chat information. That information is then pushed to the userchats directory and is pushed in to those users channels.
export const createChannel = (name,members,purpose) => dispatch =>{
db.ref(`chat/chats/`).push({name,members,purpose})
.then(result=>{
let key = result.getKey()
members.map(function(member,i){
db.ref(`chat/userchats/${member}`).push(key)
.then(result=>{})
.catch(error=> {
console.log(error)
})
})
})
.catch(error => {
console.log(error);
})
}
When I console.log at the end of the createChannel(), and console.log prior to the channels dispatch, in fetchChannel(). When I create the channel, it shows that fetchChannels updates first, and createChannel() second, even though createChannel() is called first, and fetchChannel() is simply listening for an update.
Here is the element I am attempting to rerender when props is updated
{Object.keys(this.props.channels).map(function(item,i){
return(
<Channel channel={this.props.channels[item].name} key={i} notification={''} selected={this.state.selected} item={item} onClick={()=>this.selectChannel(item)}/>
)
},this)}

Answer 1

Thanks for the responses Josh.
I was able to solve my issue. I had to switch the order of database entries. Because the chats push was triggering the userchats update before it was able to create the channels entry. Creating a key and using that to create userchats entries first solved the update issue.
export const createChannel = (name,members,purpose) => dispatch =>{
let newKey = db.ref().push().getKey()
members.map(function(member,i){
db.ref(`chat/userchats/${member}`).push(newKey)
.then(result=>{})
.catch(error=> {
console.log(error)
})
})
db.ref(`chat/chats/${newKey}`).set({name,members,purpose})
}