I'm using react-redux in my next js application. I'm calling the request to create a store when there is a request in my _app.js but there is some message logged in my console every time I route to a page.
This is its screenshot
I feel this is a bit annoying, I've search all over my code but I can't find what is logging here. Here is my _app.js for reference.
import Layout from '../components/Layout/Layout';
import '../styles/globals.css';
import { initializeParse } from '#parse/react-ssr';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import React from 'react';
import store from '../redux/store';
import App from 'next/app'
import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'
import ru from 'javascript-time-ago/locale/ru'
TimeAgo.addLocale(en)
class MyApp extends App{
static async getInitialProps({Component,ctx}){
const appProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {} ;
return {appProps: appProps};
}
render() {
const {Component,appProps} = this.props;
return(
<Provider store={store}>
<Layout>
<Component {...appProps} />
</Layout>
</Provider>
);
}
}
const makeStore = () => store;
export default withRedux(makeStore)(MyApp);
I would like find out what's going on
This was an issue with next-redux-wrapper.
Ref.:
https://github.com/kirill-konshin/next-redux-wrapper/issues/385
https://github.com/kirill-konshin/next-redux-wrapper/pull/384
It is fixed in this commit, release.
Please upgrade to v7.0.2 to resolve this problem.
Related
ComponentDidMount in my overarching App component is being called twice, and I can't figure out why. So far google suggests this is usually due to a lack of keys that means the app has to assume things have changed and delete everything instead of just the relevant portion of the DOM, but I stripped my app as bare as I can get reasonably get it and it's still happening.
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App global={{baseUrl: "http://localhost", port: 54887}} />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
App.tsx:
import React from 'react'
import CurrentItems, { CurrentItemsProps } from './CurrentItems';
import Navigation, { NavigationProps } from './Navigation';
import { CombinedNavigationProps } from './Navigation';
import './App.css';
import { GlobalProps } from './GlobalProps';
interface AppProps extends GlobalProps {}
interface AppState {
navigation: NavigationProps;
}
class App extends React.Component<AppProps, AppState> {
constructor(props: AppProps){
super(props);
//this.onSelectedViewChange = this.onSelectedViewChange.bind(this);
}
componentDidMount(){
console.log("app did mount");
}
onSelectedViewChange(view: string) {
}
render(){
if(this.state === undefined || this.state === null){
return (<div>Loading...</div>);
} else {
return (
<div>
Loaded.
</div>
);
}
}
}
export default App;
Link to github for full code
Screenshot of console output:
Per #NicholasTower's comment, it's because I'm using strict mode. Seems like it's time to learn about Hooks! Guess I didn't go far enough in the ReactJS introduction documentation.
okay, so i'm new to the react world, and i was learning about the react useContext, i followed exactly what a tutorial on youtube did, i'm trying to build a little project, i tried following his steps and then i hit an error while trying to use the state i literally want it to be accessible accross my app components, inside my app i've created various componenents and also various responsibility that combines all the reusuable components and do a specific task with it. i'm now trying to access my context from my GETCLICKEDIMAGES file, below are my steps
StateContext.jsx file
import React, { useState, createContext } from "react";
export const StateContext = createContext();
export const StateProvider=(props)=> {
//all the components in this app will share this state.
const [names, setNames] = useState([{ name: "Zucci Daniel! its working" }]);
return (
<StateContext.Provider value={"helo"}>{props.children}</StateContext.Provider>
);
}
App.js
import React, { Component } from "react";
import BigWrapper from "./justComponents/BigWrapper/BigWrapper";
import NavBar from "./justComponents/NavBar/NavBar";
import MainContainer from "./justComponents/MainContainer/MainContainer";
//below are the various responsibilities component
import SEARCHANDDISPLAY from "./Responsibilities/SEARCHANDDISPLAY/SEARCHANDDISPLAY";
import { GETCLICKEDIMAGES } from "./Responsibilities/GETCLICKEDIMAGES/GETCLICKEDIMAGES";
import { StateContext } from "./StateContext/StateContext";
class App extends Component {
render() {
return (
<StateContext>
<BigWrapper>
<NavBar />
<MainContainer>
<SEARCHANDDISPLAY />
<GETCLICKEDIMAGES />
</MainContainer>
</BigWrapper>
</StateContext>
);
}
}
export default App;
GETCLICKEDIMAGE.jsx
import React,{useContext} from "react";
import ClickedImageHolderDiv from "../../justComponents/ClickedImageHolderDiv/ClickedImageHolderDiv";
import Figure from "../../justComponents/Figure/Figure";
//you wanna use the stateContext right? import the context here as so;
import { StateContext } from "../../StateContext/StateContext";
//this is responsible for getting the clicked images and displaying them in full details
/**
a DIV to hold the FIGURE
*/
export const GETCLICKEDIMAGES=()=> {
const value =useContext(StateContext);
return (
<ClickedImageHolderDiv>
<h2>{value}</h2>
<Figure useThisStyle={{ height: "100%" }} />
</ClickedImageHolderDiv>
);
}
i don't know if i'm missing something, or something's changed, pls help.
Import StateProvider in your app.js instead of stateContext
I'm building a React Native app with TypeScript using Redux for my state.
I like using two seperate files for configureStore. In JS This looks like this:
configureStore.dev.js:
import { applyMiddleware, createStore } from "redux";
import logger from "redux-logger";
import reducers from "../reducers";
const configureStore = () => {
const store = createStore(reducers, applyMiddleware(logger));
return store;
};
export default configureStore;
configureStore.prod.js:
import { createStore } from "redux";
import reducers from "../reducers";
const configureStore = () => {
const store = createStore(reducers);
return store;
};
export default configureStore;
configureStore.js:
import Config from "react-native-config";
if (Config.REACT_ENVIRONMENT === "staging") {
module.exports = require("./configureStore.dev");
} else {
// tslint:disable-next-line no-var-requires
module.exports = require("./configureStore.prod");
}
And then within App.js:
import React, { Component } from "react";
import Orientation from "react-native-orientation";
import { Provider } from "react-redux";
import Navigator from "./navigation/Navigator";
import configureStore from "./redux/store/configureStore";
export const store = configureStore();
export default class App extends Component {
componentDidMount = () => {
Orientation.lockToPortrait();
};
render() {
return (
<Provider store={store}>
<Navigator />;
</Provider>
);
}
}
The problem now with TypeScript is that - after converting these files to .ts and .tsx - this code throws linting errors (and it furthermore blocks all Jest unit tests from running).
The lines where modules.exports exports the respective file depending on environment variables throws the error:
[tslint] require statement not part of an import statement (no-var-requires)
And in App.tsx the import of configureStore throws:
[ts] Module '"/Users/jan/Documents/FullStackFounders/PainButton/painbutton/app/redux/store/configureStore"' has no default export.
How would one handle this case in TypeScript?
The only solution I could come up with was only using one file and using a lot of if's for all the Dev only configs. But that doesn't seem clean to me.
It seems you are mixing import / export and require / module.exports syntax.
Try to use dynamic import expressions.
configureStore.js
export default Config.REACT_ENVIRONMENT === "staging" ? import("./configureStore.dev") : import("./configureStore.prod");
main render file
import configure from "./configureStore.js";
configure.then(configFunc => {
const store = configFunc();
ReactDOM.render(<App store={store} />, document.querySelector("#root"));
})
Pass the store as a prop to the <App /> Component.
I hope it will help.
The development server returned response error code: 500 \n\n
Unable to resolve "./components/Provider" from "node_modules\react-redux\lib\index.js"
BodyX:
{"originModulePath":"C:\\Users\\MY PC\\Documents\\Projects\\snapfood-customer\\node_modules\\react-redux\\lib\\index.js","targetModuleName":"./components/Provider","message":"Unable to resolve module `./components/Provider` from `C:\\Users\\MY PC\\Documents\\Projects\\snapfood-customer\\node_modules\\react-redux\\lib\\index.js`: The module `./components/Provider` could not be found from `C:\\Users\\MY PC\\Documents\\Projects\\snapfood-customer\\node_modules\\react-redux\\lib\\index.js`. Indeed, none of these files exist:\n\n
my code is as below:
import React from 'react';
import store from './app/index';
import WelcomeScreen from './app/WelcomeScreen';
import { Provider } from 'react-redux';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<WelcomeScreen/>
</Provider>
);
}
}
There appears to be an error with how I'm using react-apollo. Following the docs, I am attempting to make a basic query with Apollo. This is the error I get in the browser when on the Review page. It appears that this.getClient is undefined and unable to call watchQuery.
react-apollo.browser.umd.js:417 Uncaught TypeError: this.getClient(...).watchQuery is not a function
at GraphQL.createQuery (react-apollo.browser.umd.js:417)
at GraphQL.setInitialProps (react-apollo.browser.umd.js:404)
at GraphQL.componentWillMount (react-apollo.browser.umd.js:260)
etc...
Here is the code for the Review page. I create a Review React Component, declare a graphql-tag that calls the userInfo query, and export the graphql tag connected to the Review page below.
import React from 'react'
import { graphql } from 'react-apollo';
import gql from 'graphql-tag'
class Review extends React.Component {...}
const userInfoQuery = gql`
query userInfoQuery{
userInfo {
_id
email
name {
first
last
}
isVerified
}
}`
const ReviewWithData = graphql(userInfoQuery)(Review)
export default ReviewWithData;
The issue was I was defining the wrong client in the root index.js file. So for the code below, the client I was exporting was not actually the correct Apollo client. So the variable client on the sixth import was importing some other functions. Lesson learned! Should have been more careful!
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo';
import App from './containers/app';
import client from './services/Apollo'
const CustomerFrontendApp = (
<ApolloProvider client={BitsyApollo.client}>
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>
);
render(BitsyCustomerFrontendApp, document.getElementById('root'));