While storing data to firebase and updating state in react redux i get the following error

Asked
Active3 hr before
Viewed126 times

6 Answers

reduxfirebasereact
90%

Connect and share knowledge within a single location that is structured and easy to search., Cutting and reattaching bookshelf legs ,Please be sure to answer the question. Provide details and share your research!

You have a mistake in the eventReducer. You are outputting an array, instead of an object.

    case actionType.ADD_EVENT:
       console.log(state.events)
    return {
       ...state,
       events: {
          ...this.state.events,
          [actions.eventPayload.type]: actions.eventPayload.value //guessed the properties of the payload
       ],
       isLoading: false
    };
88%

Connect React Firebase,It will initiate a connection with Firebase at the app init.,It will make sure that only one connection per app instance will exist with Firebase.

1 // firebaseConfig.js
2 // Contains the config details of firebase, this should NOT be committed to your repo
3 // if the repo is public
4 // You could optionally use .env file to store these data
5
6
export default {
   7 apiKey: "********",
   8 authDomain: "********",
   9 databaseURL: "********",
   10 projectId: "********",
   11 storageBucket: "********",
   12 messagingSenderId: "********",
   13 appId: "********"
   14
};
load more v
72%

The Firestore integration is built on redux-firestore. Auth, Storage, and RTDB interactions still occur within react-redux-firebase, while redux-firestore handles attaching listeners and updating state for Firestore.,useFirestoreConnect is a React hook that manages attaching and detaching listeners for you as the component mounts and unmounts.,To begin using Firestore with react-redux-firebase, make sure you have the following:

Should look something similar to:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore' // <- needed if using firestore
import { createStore, combineReducers, compose } from 'redux'
import {
  ReactReduxFirebaseProvider,
  firebaseReducer
} from 'react-redux-firebase'
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const firebaseConfig = {}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users'
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

// Initialize firebase instance
firebase.initializeApp(firebaseConfig)

// Initialize other services on firebase instance
firebase.firestore() // <- needed if using firestore

// Add firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer // <- needed if using firestore
})

// Create store with reducers and initial state
const initialState = {}
const store = createStore(rootReducer, initialState)

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance // <- needed if using firestore
}

// Setup react-redux so that connect HOC can be used
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Todos />
      </ReactReduxFirebaseProvider>
    </Provider>
  )
}

render(<App />, document.getElementById('root'))
load more v
65%

The other common pain points around writing reducers have to do with updating state immutably. JavaScript is a mutable language, updating nested immutable data by hand is hard, and it's easy to make mistakes.,Update its state immutably, by making copies of the parts of the state that need to change and only modifying those copies,In development, middleware that check for common mistakes like mutating the state or using non-serializable values.

import {
   applyMiddleware,
   createStore
} from 'redux'
import {
   composeWithDevTools
} from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureStore(preloadedState) {
   const middlewares = [loggerMiddleware, thunkMiddleware]
   const middlewareEnhancer = applyMiddleware(...middlewares)
   const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
   const composedEnhancers = composeWithDevTools(...enhancers)
   const store = createStore(rootReducer, preloadedState, composedEnhancers)
   if (process.env.NODE_ENV !== 'production' && module.hot) {
      module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
   }
   return store
}
load more v
75%

Reducers: “Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.” when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.,A reducer is a pure function that takes the previous state and an action as arguments and returns a new state. The reducer is instrumental in keeping the current state of count updated throughout our app as it changes.,Actions: “are payloads of information that send data from your application to your store. They are the only source of information for the store.” this means if any state change necessary the change required will be dispatched through the actions.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

.css - vem1e6 {
   color: var (--expo - theme - text -
      default);font - family: expo - brand - mono,
   Monaco,
   Consolas,
   'Liberation Mono',
   'Courier New',
   monospace,
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol',
   'Noto Color Emoji';font - size: 13 px;line - height: 20 px;white - space: inherit;padding: 0 px;margin: 0 px;
}.css - vem1e6.code - annotation {
   -webkit - transition: 200 ms ease all;
   transition: 200 ms ease all;
   transition - property: text - shadow, opacity;
   text - shadow: var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px;
}.css - vem1e6.code - annotation: hover {
   cursor: pointer; - webkit - animation: none;animation: none;opacity: 0.8;
}.css - vem1e6.code - hidden {
   display: none;
}.css - vem1e6.code - placeholder {
   opacity: 0.5;
}
import firebase from 'firebase/app'

// Optionally import the services that you want to use
//import "firebase/auth";
//import "firebase/database";
//import "firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
   apiKey: 'api-key',
   authDomain: 'project-id.firebaseapp.com',
   databaseURL: 'https://project-id.firebaseio.com',
   projectId: 'project-id',
   storageBucket: 'project-id.appspot.com',
   messagingSenderId: 'sender-id',
   appId: 'app-id',
   measurementId: 'G-measurement-id',
};

firebase.initializeApp(firebaseConfig);
load more v

Other "redux-firebase" queries related to "While storing data to firebase and updating state in react redux i get the following error"