This code is supposed to do the job BUT the value of
previousContext still having the same value of the code
previousContext comes from a custom hook which memorize previous values usePrevious like the componentDidUpdate lifecycle fn does
Someone has an idea to force
code prop to be memorized ?
I force mocked usePrevious fn hook keeping the same value event when the prop has changed
I am using react-redux hooks in a functional component. I am trying to find what the best practice is for this case. I have a store that is an object, its a list of items, a loading boolean, and an error property. I have a page for editing one of those items. I dispatch the updateItem action. How do I figure out in my UI that the event finished? It uses an Api middleware and dispatches actions when the call is finished, but how do you "listen" for a specific action in the UI component?
1 reply
would you create a separate store for specifically editing a single item?
login = () => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const email = this.state.userEmail;
const password = this.state.userPassword;
const user = {
email: email,
password: password
}
// const body = JSON.stringify(params);
event.preventDefault();
axios.post('http://localhost:5000/api/admin', user, config)
.then(function (response) {
alert(response.data);
})
.catch(function (error) {
alert(error);
});
// window.location.reload();
}
Hi, how to Pass Data from React Native to Passport.js FacebookTokenStrategy Callback?
https://stackoverflow.com/questions/61834412/how-to-pass-data-from-react-native-to-passport-js-token-strategy-callback
any help would be much appreciated.
@nhatndm : Do we have any automapper in React for mapping data from service to model
I saw Hashnode's was deprecte
deprecated
I just want a full stack react application with authentication
NextJS
I'm wondering if there is a
- non-trivial example of state management combined with a real-time dashboard(ngrx is also fine)
- non-trivial example of a state management combined with MVVM
Hey, in case someone knows the answer: https://stackoverflow.com/questions/61998501/multiple-nested-redux-stores
this may be an option, https://www.npmjs.com/package/redux-storage
Please consider these are two separate things.
- One is how redux helps keeping state during your application life span. (and ALL redux concepts and philosophy within)
- On the other hand, you are looking for a way to keep that state persisted in a kind of "long term storage". This is indepentend from Redux.
It's also truth, though, that these 'storage' libs can be used as a Redux middleware.
Hi, how can i simulate internet connection on react native ios simulator? https://stackoverflow.com/questions/62040164/how-to-simulate-internet-connection-on-react-native-ios-simulator
Hi Guys,
I am facing an issue in react, it says
I am facing an issue in react, it says
Uncaught TypeError: Cannot read property 'errors' of undefined
at Login (Login.js:28)
at renderWithHooks (react-dom.development.js:14803)
at mountIndeterminateComponent (react-dom.development.js:17482)
at beginWork (react-dom.development.js:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at scheduleUpdateOnFiber (react-dom.development.js:21188)
at updateContainer (react-dom.development.js:24373)
at react-dom.development.js:24758
at unbatchedUpdates (react-dom.development.js:21903)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
at Object.render (react-dom.development.js:24840)
at Module../src/index.js (index.js:10)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Object.1 (serviceWorker.js:141)
at __webpack_require__ (bootstrap:784)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
Login @ Login.js:28
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:10
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.js:141
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <Login> component:
in Login (created by ConnectFunction)
in ConnectFunction (at App.js:7)
in App (at src/index.js:13)
in StrictMode (at src/index.js:12)
in Provider (at src/index.js:11)
here is the Login component
import React, { useState } from "react";
import { Container, Row, Col, Image, Form, Button } from "react-bootstrap";
import { connect } from "react-redux";
const Login = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<div className="Login">
<div className="LoginLeftPanel">
<Container>
<Row>
<Col xs={6} md={4}>
<Image src="holder.js/171x180" thumbnail />
</Col>
</Row>
</Container>
</div>
<div className="LoginRightPanel">
<Form>
<h2>Login</h2>
<hr />
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
isInvalid={props.loginForm.errors.email.length > 0}
isValid={
props.loginForm.values.email &&
props.loginForm.errors.email.length === 0
}
onChange={(e) => setEmail(e.target.value)}
/>
<Form.Control.Feedback type="invalid">
{props.loginForm.errors.email}
</Form.Control.Feedback>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
isInvalid={props.loginForm.errors.password.length > 0}
isValid={
props.loginForm.values.password &&
props.loginForm.errors.password.length === 0
}
onChange={(e) => setPassword(e.target.value)}
/>
<Form.Control.Feedback type="invalid">
{props.loginForm.errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button
variant="primary"
type="button"
onClick={() =>
props.dispatch({
type: "FORM_SUBMIT",
payload: { email, password },
})
}
>
Login
</Button>
</Form>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
loginForm: state.Login,
});
export default connect(mapStateToProps)(Login);
And here is reducer
import * as types from "../Actions/ActionTypes";
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const initialState = {
loginForm: {
values: {
email: "",
password: "",
},
errors: {
email: "",
password: "",
},
},
};
const setErrors = (email, password) => {
let errors = { email: "", password: "" };
if (!email && email.length === 0) {
errors.email = "Email is required";
} else if (!validateEmail(email)) {
errors.email = "Email is invalid";
}
if (!password && password.length === 0) {
errors.password = "Password is required";
} else if (password.length < 8) {
errors.password = "Password must have 8 characters";
}
return errors;
};
export default function LoginReducer(state = initialState, action) {
switch (action.type) {
case types.Login:
const { email, password } = action.payload;
const values = {
email,
password,
};
const errors = setErrors(email, password);
return {
loginForm: {
values,
errors,
},
};
default:
return state;
}
// if (action.type === "FORM_SUBMIT") {
// const { email, password } = action.payload;
// const values = {
// email,
// password,
// };
// const errors = setErrors(email, password);
// return {
// loginForm: {
// values,
// errors,
// },
// };
// }
// return state;
}
@diegoaguilar actually I am developing a pos system using Slim PHP framework as an API and react js as a frontend. When I tried to see what happened if I close the browser after login in to admin dashboard, I saw it preserved my previous store objects. And here is the store configuration:
```jsx
import { combineReducers, compose, createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import authentication from "./reducers/authentication";
import alert from "./reducers/alert";
const initialState = {};
const middleware = [thunk];
const reducers = combineReducers({
auth: authentication,
alert,
});
const store = createStore(
reducers,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
I am calling this addPost method which is in my context for serving multipart data to the server,,, but after clicking on onSubmit it keeps on reloading the same page and doesnot move to the url that I specified ?????? the data is posted to server but the page keeps reloading to same url