4

In below example, after I get data from firebase, I want to add user object which is already present in redux store and append it in all the message objects. Request you to help.

Questions:

  1. Is it a good approach to access state in action creator? If yes, how?
  2. If not, what are the alternatives?
db.collection(`messages/${documentId}/chat`)
  .get()
  .then(snapshot => {
    const messages = [];
    snapshot.docs.forEach(doc => {
    console.log("message", doc.id, doc.data());
    messages.push({
      id: doc.id,
      from: doc.data().from,
      to: doc.data().to,   
      text: doc.data().text,
      timestamp: doc.data().timestamp.seconds * 1000
    });
  });
  dispatch({ type: GET_CHAT, payload: messages });
});
jo_va
  • 13,504
  • 3
  • 23
  • 47
Vishal Avalani
  • 381
  • 3
  • 14
  • why do you need to get state in action? – liu pluto Mar 16 '19 at 08:17
  • I am building chat application and want to append user object which are already queried once and present in store after I get chat messages from firebase. – Vishal Avalani Mar 16 '19 at 08:18
  • so you have let me say a user-store and a message-store right? you want get the userInfo and then save it to your message-store when you queried messages? – liu pluto Mar 16 '19 at 08:23
  • i agree with this reply man, maybe it will give you some clues [link](https://stackoverflow.com/a/35674575/6399835) the author of redux – liu pluto Mar 16 '19 at 08:27
  • "want to append user object which are already queried once and present in store " the better approach would be to keep your store in normal state in a sense of relational db. And denormalize your data only when mapping state to component props using selectors. Otherwise you'd almost certainly have various "oh I updated user but my chat component did not rerender" problems. – Yury Tarabanko Mar 16 '19 at 09:51
  • As of accessing state in action creators you could use `redux-thunk` middleware. The second argument would be `getState` function that snapshots the state. – Yury Tarabanko Mar 16 '19 at 09:54

2 Answers2

13

if your using Redux Thunk middleware, you could simply do that:

const myAction = () => async (dispatch, getState) => {
  const { field1, field2 } = getState().myReducer;
};
Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
1

Simply. import store from "..path/to/your/createStore/export".

then use it inside action or anywhere, where we cannot use connect method of redux to subscribe to our component.

store.getState() // will return the whole store object.

other useful method to dispatch action;. store.dispatch(action name).

Lastly, soter.getState() should be used in case of emergency. for your use case . mostly we work with action arguments. And pass data as parameters of actions. From where we dispatch actions ex. from some component which is subscribed to redux store. there we will access to store object via the mapStateToProps method.

export const successBuy = data => {
let request = axios
.post(`/api/users/successBuy`, data)
.then(response => response.data);
return {
type: actionTypes.SET_CURRENT_USER,
payload: request
 };
};
Raj D
  • 485
  • 1
  • 5
  • 11