General Questions for a ReactJs, Redux, Firebase project

Question

I have a few general questions I would like to get an answer… I did my own research in:

• the firebase documentation with little success when it comes to setup the firebase, redux, react state.

• I am aware of the two part video series of React and firebase setup in the firebase youtube channel but nothing about integrating redux to that ecosystem.

• This youtube videos a close to or over two years old and I don’t know if they still apply (https://www.youtube.com/watch?v=p4XTMvagQ2Q).

• I have found a few tutorials relating this type of setup, but to me they seem quite opinionated and I do not know if these setup are optimal or have anti-patterns (https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3, https://github.com/tiberiuc/redux-react-firebase --straight from redux documentation in the resources section, I may be wrong but it doesn’t seem like it is being maintained, others: https://github.com/prescottprue/react-redux-firebase, ).

• I tried reaching out to the #react , #redux, #react-design channels in the slack firebase community but I do not believe these channels are being used. I am a beginner when it comes to firebase and I need some pointers now that I am trying to get familiar with this new database… My questions are:

• is this repo recommended to implement firebase with redux and react? https://github.com/FirebaseExtended/reactfire#using-the-firebase-js-sdk-in-react

• should I follow the implementation of firebase API methods just like the video of react & firebase? meaning, call every method that I need on the component’s lifecycle, let’s say:

componentDidMount() {
    firebase.auth().onAuthStateChanged(this.updateAuthState);
  }

     • and set my default state as such to create the store?:

const defaultState = {
  auth: {
    isAuth: firebase.auth().currentUser,
  },
};

should I link somehow the firebase db to the redux actions, by using, for example, the react-redux-firebase library, or just set a configuration file for firebase and leave redux to act independently from it.

And lastly, I am currently importing firebase in every component where I am using the functions, is the right way to use firebase? or should I follow another approach like: https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

The above tutorial creates a class for all functionality related to firebase and instantiate the class where it is needed.

Thank you so much for any help provided and I would appreciate any information or resources that could help me out.

Answer 1

If you are using class based methods you have to make API calls inside the componentDidMount, so you are good there. However, I integrate my API calls inside of my redux store. That way all the code is in the same place. However, you can go to hooks if you use a functional based component and the newest version of React. In that case, API calls would go inside of useEffect. This works better because it acts as componentDidMount and componentDidUpdate, saving you a lot of time.

It looks like you should be able to just provide the Firebase inside your parent (App.js in most cases) of all your components. That tutorial looks like a good follow. I have used the same person for Django backend set ups.

Last but not least you can store your default values inside the reducer. Keeping the API calls in your actions and default values in reducer should save some code.