See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• Organize large states with redux toolkit

  I am fairly new to redux and redux-toolkit, but I am fairly familiar with the whole concept of stores (coming from a vuex background).

  I have an issue organizing a large state with lots of dependencies between the objects. My current approach is to use a structure similar to RDBMS where each object has its own ID and other objects reference it through that ID. This way, there are no deeply nested objects.

  My current problem is how to organize a large state with lots of dependencies and lots of types of objects (type of object = "table"). I could put all of the objects into a single slice, but this would make that slice incredibly large.

  Another approach is to separate each of the object types into different slices, with a single slice for each object type. This presents the problem that accessing the state of another slice is not easily done but is required to update that state in order to keep the state consistent (i.e. avoid broken references).

  Is there a good, common approach on how to structure a large state with a lot of dependencies?
• Trying to work with asyncSagas to fetch and display array of items and manipulating them in different components. Struggling to understand how?

  I am trying to fetch some data from an API, then storing that data and providing it to different components so that they can dynamically manipulate it. I am, however, absolutely struggling to understand how Redux operates, what's the best way to do it and how it works with React Toolkit. I am absolutely obsessed in trying to learn and understand how all of this works, but at the moment the more docs I read I get more confused. Based on my current understanding I have set up a store.js file and configured it:

  import { configureStore } from "@reduxjs/toolkit";
  import PeopleReducer from "./peopleSlice";
  export default configureStore({
    reducer: {
      app: PeopleReducer,
    },
  });
  

  I then have another file that should fetch me the data from the API:

  import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
  
  
  export const fetchPeople = createAsyncThunk(
      "people/fetchPeople",
      async () => {
        return fetch(
          "https://swapi.dev/api/people"
        ).then((res) => res.json());
      }
    );
  
  
    const peopleSlice = createSlice({
      name: "people",
      initialState: {
        people: [],
        person: {},
      }
    });
  
    export default peopleSlice.reducer;
  

  After that a component that should receive the fetched API data:

  const PeopleList = () => {
    const { people, loading } = useSelector((state) => ({ ...state.app }));
    const dispatch = useDispatch();
  
    useEffect(() => {
      dispatch(fetchPeople());
      console.log(people);
    }, []);
  
    return <div>{people.map(person => {
        return <p>{person.name}</p>
    })}</div>;
  };
  

  However, I can't quite understand how that fetched and stored data is supposed to be accessed and manipulated by different components and rendered dynamically, when for example it's filtered within one of the components. Any pointers is much appreciated.
• Redux Toolkit: How can I store a serialized action creator in state?

  Question

  I am using Redux Toolkit and I want to store an action creator in state. When I do this, I receive an error regarding non-serializable values in my action as well as my state. Using the code below as an example of my issue, how can I resolve it without just suppressing the warning?

  Slice Code

  import { ActionCreatorWithoutPayload } from '@reduxjs/toolkit';
  
  export type ModalType =
    {
      type: 'MyModal';
      actionText: string;
      onConfirm: ActionCreatorWithoutPayload;
    }
  
  type ui = {
    modal: ModalType | null;
  };
  
  const initialState: ui = {
    modal: null
  };
  
  export const slice = createSlice({
    name: 'ui',
    initialState: initialState,
    reducers: {
      showDialog: (state, action: PayloadAction<ModalType>) => {
        state.modal= action.payload;
      },
      someAction: (state) => {
        // do something
      },
    }
  });
  

  Component Code

  import { someAction } from 'reducers/uiSlice';
  
  <Button
    onClick={() =>
    dispatch(
      showDialog({
        type: 'MyModal', actionText: `Some text`, onConfirm: someAction}
      )
    )}
  />
  

  Error Message

  A non-serializable value was detected in an action, in the state: `payload.onConfirm`. Value: ƒ actionCreator() {
      var args = [];
  
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
  
      if (prepareAction) {
        var prepared = prepareAction.apply(void…