React-native-gifted-chat: redux example

[sibelius]

is there any example of using GiftedMessenger with Redux?

[KhalilZaidoun]

hello is there any example of using gifted-list-view with Redux ??

[wookiem]

@sibelius @KhalilZaidoun Did either of you get this working with Redux?

[kfiroo]

Do you have any specific problem of getting it to work with redux? It should be pretty straight forward.

[wookiem]

I can boil down my confusion to the following:

1. How does previousState get set in the onSend code used in the example? I must be missing some JS knowledge here...

onSend(messages = []) {
    this.setState((previousState) => {
      return {
        messages: GiftedChat.append(previousState.messages, messages),
      };
    });
}

1. When I receive a remote message, how do I insert this into messages? The example only shows initial state loading and local message creation (via onSend).

If you can clarify these two areas, then I should be good to go.

[kfiroo]

1. this has nothing to do with redux, this is another form of react's setState method. see these posts for info https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b and https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1
2. if you use redux, you should probably dispatch an action such as 'MESSAGE_RECEIVED' that would add the new message to your store. You should have a connected component that selects the messages from your store and it should be updated after the data is updated.

[wookiem]

Thanks for clarifications @kfiroo.

If I understand correctly, I have two options for managing messages state:

1. Use gifted-chat state to store messages (i.e. load messages in componentWillMount and do any translation between my Redux message data structure (and message ordering) and gifted-chat's data structure requirements). Any new messages (locally generated or received from server) should then use GiftedChat.append to update gifted-chat state. Local messages will do so within onSend and remote messages will do so within componentWillReceiveProps.

2. Manage messages directly within redux by adhering to gifted-chat's message structure and message ordering. This can then be passed directly as prop to gifted chat. In this case onSend will simply update redux. componentWillReceiveProps is not used since both local and remote changes will cause re-render and pass updated redux messages to gifted-chat`.

Is my interpretation correct?

[just4fun]

@wookiem thanks for your interpretation, I chose the first one you mentioned in my project.

1. In this way, we can see the new message immediately in the bubble thread (we can set flag to the new message such as isNew: true and then rewrite renderTicks to indicate something like publishing...), then update state with server fetching result (then there is no publishing...).

2. If we choose this approach, we can only see the new message in the bubble thread with server fetching result.

[wookiem]

@just4fun Glad to hear you got it working.

I ended up going with the second approach. I have a dedicated redux state/reducer for gifted-chat-messages that gets loaded / unloaded from my main messages redux state. This allows me to translate into gifted-chat's specific data structure without impacting my primary messages data structure.

Sent messages appear immediately in the bubble thread (no dependency on server acknowledgment). I also customized renderTicks UI to mimic WhatsApp sent message progression (MSG_SENT -> MSG_HIT_SERVER -> MSG_DELIVERED -> MSG_VIEWED).

[just4fun]

@wookiem if you use the second approach, how did you let the new messages appear immediately? as you second approach described, we should use props instead of state. However, we can not update props in component itself, we can only use state to store new messages instead of hitting server API then get back new messages.

[wookiem]

@just4fun When onSend is called in my giftedChat React component, it creates a redux action (e.g. ADD_MESSAGE). I listen for this action in both messageReducer (my main message reducer) and also in giftedMessageReducer (gifted-chat specific reducer). The update to giftedMessage state causes the giftedChat React component to re-render since giftedMessage is a prop to that component.

[just4fun]

@wookiem it makes sense, thanks.

[jimmytuc]

great information for me, thank you!

[Frexuz]

@wookiem sounds awesome. are you willing to share actual code? :)

[wmonecke]

@kfiroo, Referring to this answer:

Question: 2. When I receive a remote message, how do I insert this into messages? The example only shows initial state loading and local message creation (via onSend).

Answer: 2. if you use redux, you should probably dispatch an action such as 'MESSAGE_RECEIVED' that would add the new message to your store. You should have a connected component that selects the messages from your store and it should be updated after the data is updated.

So basically you mean a reducer that returns a new array? One that has all previous messages and the new message included? Thank you for your time!

I opened an issue that is related to this #601

[Frexuz]

So basically you mean a reducer that returns a new array? One that has all previous messages and the new message included? Thank you for your time!

yes

[wmonecke]

@Frexuz This is what I did, however there are issues happening that I thought were related to GiftedChat not rendering correctly when receiving new messages.

For example the first initial fetch of the messages looks fine. However, every new incoming message (coming from the backend) does not render the timestamp or the styling of the bubble correctly.
This does not happen if you manage state locally and use GiftedChat.append() to receive new messages.

Here is my issue with screenshots. #601