If I wrap component with store.subscribe(),the contents will disappear
I wrap this is because I want to rerender component after I update the state.
store.subscribe(() => {
ReactDOM.render(
<React.StrictMode>
<Count />
</React.StrictMode>,document.getElementById('root')
)
})
do you know?
how many words do you know
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?
-
Add product with Attributes to cart using redux
I need help in Reactjs app 'Add to cart'. I am using redux and to add products to cart with quantity and everything going right until tried to add specific attributes such as size or color and I don't know how to handle this can anyone explain me the logic to do it?
this is the reducer
case actionTypes.ADD_TO_CART: const item = state.data.find((item) => item.id === action.payload.id); const inCart = state.cart.find((item) => item.id === action.payload.id ? true : false ); return { ...state, cart: inCart ? state.cart.map((item) => item.id === action.payload.id ? { ...item, qty: item.qty + 1, selectedAttributes: [...item.selectedAttributes] } : item ) : [...state.cart, { ...item, qty: 1, selectedAttributes: [] }], }; case actionTypes.ADJUST_ATTRIBUTES: let selectedAttributes = []; return { ...state, cart: state.data.map((item) => item.id === action.id ? { ...item, selectedAttributes: { [action.selectedAttributes.name]: action.selectedAttributes.value } } : item ), };
this is action
export const addToCart = (itemID) => { return { type: actionTypes.ADD_TO_CART, payload: { id: itemID } } } export const selectAttribute = (itemID, name, value) => { return { type: actionTypes.ADJUST_ATTRIBUTES, id: itemID, selectedAttributes: { name: name, value: value } } }
this is the radio button I want to select from it to add attribute
attribute.items.map((item, index2) => { return ( <div className="button" key={index2}> <input onClick={() => this.props.selectAttribute( this.props.currentItem.id, attribute.name, item.value ) } type="radio" disabled={!this.props.currentItem.inStock} name={`${this.props.currentItem.name}-${attribute.name}-${index}`} value={item.value} className="attributes-value" /> <label className="attributes-label" htmlFor={`${this.props.currentItem.name}-${attribute.name}-${index}`} > {item.value} </label> </div> ); })
-
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…
-
How to write a global store plugin?
I'm trying to make a reactive
$store
object globally available via plugin but am failing to make it work.store.ts
:import {reactive} from "vue"; export default { install: (app:any, options:any) => { app.config.globalProperties.$store = reactive({}) } }
main.ts
:import {createApp} from 'vue'; import app from "@/vue/app.vue"; import store from "@/scripts/store"; createApp(app) .use(store) .mount("#app");
Now I would expect for the plugin to be usable in all components, but
$store
stays anundeclared variable
, when I try to use it in the<script setup>
tag inside a component. -
How to register store as global variable object?
Currently I'm using a reactive
store.js
like so:import {reactive} from "vue"; const re = reactive({}) export default { re }
which then can be used in components like so:
<script setup> import store from "../../../scripts/store"; store.re.hello = 'hello world' </script>
Is there a way to register the
store.re
object in vue, so that:- it becomes globally available in all components without import and
re
fromstore.re
gets omitted to juststore
, when calling it? I find it unnecessary boilerplate
-
Studying language in c, case store
I started studying the language in "C", I study alone, so I'm having trouble with the code below: I want to make a simple “C” code for an online store, but I'm having trouble understanding how to implement this:
The doubt:
1° My code doesn't let me insert stock items in the cart.
Gives error signal: segmentation fault (core dumped)
2°When I enter the store to choose the product, it only shows 1 item, the others are not listed.
3° How would I complete the purchase part? example I selected the items and I want to complete the purchase, it should show me what I am buying the quantity and total value, I can't think about it :(
my code:
#include <stdio.h> #include <stdlib.h> int cod_product = 0; int i = 0; void stockentry(); void stock(); void showcase(); void shoppingcart(); void finish(); typedef struct { int amount; int cod; char name[100]; float price; } product; product* prod; typedef struct { int cod1; Int amount1; } cart; Cart* car; int main(void) { int op; while (op != 7) { printf("\n\n---------------------------------------------------------------" "------------:):):)\n\n"); printf("\n--welcome to the store--"); printf("\n\nChoose a product press enter"); printf("\n\n(1)Stock\n(2)See " "stock\n(4)showcase\n(5)Purchase\n(6)Finish\n(7)Sair\n"); scanf("%i", &op); switch (op) { case 1: stockentry(); break; case 2: stock(); break; case 3: showcase(); break; case 4: shoppingcart(); break; case 5: Finish(); break; case 6: printf("cancelled purchase!"); break; case 7: printf("closed section"); break; default: printf("Enter a valid option"); break; } } } void stockentry() { int i; printf("\n\n-- You are in stock. --"); printf("\n\nHow much do you want to add: "); scanf("%i", &cod_product); prod = (product*)malloc(cod_product * sizeof(product)); if (prod == NULL) { printf("error"); } for (i = 0; i < cod_product; ++i) { printf("\n > what amount: "); scanf("%i", &prod[i].amount); printf("\n > what code: "); scanf("%i", &prod[i].cod); printf("\n > Enter the name: "); scanf("%s", &prod[i].name); printf("\n > Enter the value: "); scanf("%f", &prod[i].price); } } void stock() { for (i = 0; i < cod_product; ++i) { printf("\n\n >> cod: %i || amount: %i || Product: %s || Price: %f\n", prod[i].cod, prod[i].amount, prod[i].name, prod[i].price); } } void showcase() { for (i = 0; i < cod_product; ++i) { printf("\n\n >> %i)Product: %s || Price: %.2f\n", i, prod[i].name, prod[i].price); } } void sho ppingcart() { printf("\n\n-- You are in the store. --"); printf("\n\n > Enter the product code and quantity."); for (i = 0; i < cod_product; ++i) { printf("\n\n > %i)Product: %s || Price: %.2f\n", i, prod[i].name, prod[i].price); printf("Enter the product code: "); scanf("%i", &car[i].cod1); printf("Enter the value: "); scanf("%i", &car[i].amount1); } car = (cart*)calloc(cod_product, sizeof(cart)); if (car == NULL) { printf("error"); } } void finish() { }