React Redux - Firebase CRUD Operations example

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