DEV Community

loading...

React Redux - Firebase CRUD Operations example

loizenai profile image loizenai ・1 min read

React Redux - Firebase CRUD Operations example

https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example

React Redux - Firebase CRUD Operations example

In this tutorial, we’re gonna do CRUD operations with Firebase Realtime Database in a React Redux Application.

Related Article: How to use Firebase Database CRUD Operations in React Webpack

Async Redux Action

Overview

We have known how the Redux works with Action creators:

  • A Component calls an Action creator.
  • That creator returns an Object with type field.
  • The Component dispatches the Object.
  • Redux store changes.

With Async Redux Action:

  • A Component calls an Action creator.
  • That creator returns a Function instead of an Action object.
  • The Component dispatches the Function.
  • The Function runs. It can have side effects with asynchronous API calls or dispatch Actions.

This Function will get executed by the Redux Thunk middleware from package called redux-thunk.

Redux Thunk

Redux Thunk middleware allows us to write Action creators that return a function instead of an action.
So we can:

  • perform asynchronous dispatch:
    
    const _increment = () => ({
    type: 'INCREMENT'
    });

const increment = () => {
return (dispatch) => {
setTimeout(() => {
dispatch(_increment());
}, 1000);
};
}

https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example

Discussion (0)

pic
Editor guide