import * as React from 'react';
import { Provider } from 'react-redux';
import type { Store } from 'redux';
import configureStore from './configureStore';
export const store: Store<*, *> = configureStore();
function CustomProvider(children: React.Node) {
return <Provider store={store}>{children}</Provider>;
}
export default CustomProvider;
I have this flow-erorr:
[flow] React element Provider (This type is incompatible with)
What type i am need to use for Provider?
Which version of flow do you use?
I just created a new empty project and added your code to my App.js and flow doesn't complain.
I used flow-bin ^0.56.0 in my package.json.
Related
If I'm already using next-auth within my next.js app can I add redux around it inside _app.js somehow?
what i tried is this:
import React from "react"
import { Provider } from 'next-auth/client'
import {Provider as ReduxProvider} from 'react-redux';
import {configureStore} from './store/configureStore';
import '../public/styles.css'
const store = configureStore();
export default function App ({ Component, pageProps }) {
return (
<ReduxProvider store={store}>
<Provider
// next-auth params, etc.
is this correct? does it work this way?
i'll also need to use redux-saga, new to the whole thing so i'm at a setup stage yet
The answer is YES. You can do that. I've tried myself and it works perfectly.
Problems setting up firebase/firestore with react and redux. Been reading through all the docs on http://docs.react-redux-firebase.com/history/v3.0.0/docs/getting_started.html and cannot render the application and obtaining the error "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
Removing ReactReduxFirebaseProvider allows my application to render however it won't be connected to the database. I have checked all my default and named exports however still cannot find the problem.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './App';
import { createFirestoreInstance } from 'redux-firestore';
import { createStore, applyMiddleware, compose } from 'redux';
import { firebase} from './config/fbConfig';
import { Provider } from 'react-redux';
import { ReactReduxFirebaseProvider} from 'react-redux-firebase';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true
};
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk)
));
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
};
ReactDOM.render(<Provider store={store}><ReactReduxFirebaseProvider {...rrfProps}><App/></ReactReduxFirebaseProvider></Provider>, document.getElementById('root'));
serviceWorker.unregister();
fbConfig
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const fbConfig = {}; // object containing my Firebase config
// Initialize Firebase
firebase.initializeApp(fbConfig);
const firestore = firebase.firestore();
const auth = firebase.auth();
export {
firebase,
firestore,
auth
};
I am new to working with firebase and fairly new to react and redux so have probably made a simple mistake however after hours of staring at this error I cannot find a solution. Any help would be appreciated.
Solution for me was to open terminal in root directory of project and run:
npm install react-redux-firebase#next
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.
Trying to setup a project with typescript and redux.
I am getting this error
Generic type 'Dispatch<S>' requires 1 type argument(s).
here is my store.ts
import { connectRouter, routerMiddleware } from 'connected-react-router'
import { applyMiddleware, compose, createStore } from 'redux'
import { createLogger } from 'redux-logger'
import ReduxThunk from 'redux-thunk'
import { createBrowserHistory } from 'history'
import reducers from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
export const history = createBrowserHistory()
const composeEnhancers = composeWithDevTools({
// Specify name here, actionsBlacklist, actionsCreators and other options if needed
})
const logger = createLogger()
const middleware = [ReduxThunk, logger]
const Store = createStore(connectRouter(history)(reducers), {}, composeEnhancers(applyMiddleware(...middleware, routerMiddleware(history))))
export default Store
here is root reducer
import { combineReducers } from 'redux'
import { ActionType } from 'typesafe-actions'
import * as actions from '../actions'
export interface IState {
test: string
}
export type Actions = ActionType<typeof actions>
export default combineReducers<IState, Actions>({
test: () => 'hey'
})
and here are some dummy actions
import { action } from 'typesafe-actions'
export const toggle = (id: string) => action('TOGGLE', id)
// (id: string) => { type: 'todos/TOGGLE'; payload: string; }
finally here is index.ts
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import './index.scss'
import registerServiceWorker from './registerServiceWorker'
import store, { history } from './store'
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } from 'connected-react-router'
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */}
<div> { /* your usual react-router v4 routing */}
<Switch>
<Route exact path="/" render={() => (<div>Match</div>)} />
<Route render={() => (<div>Miss</div>)} />
</Switch>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root') as HTMLElement
)
registerServiceWorker()
Here seems to be a similar issue without solution yet
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/9611
But I am new to typescript so might be missing something basic
It looks to me like you are indeed facing the same issue you linked. While we wait and see if 7mllm7's pull request is merged, you can use his modified version of the react-redux types. I'd recommend the following approach:
git clone --depth=1 https://github.com/7mllm7/DefinitelyTyped
Copy the types/react-redux folder into your project (suppose for example you copy it to a folder named react-redux.fixed).
Edit react-redux.fixed/package.json to replace "private": "true" with "name": "#types/react-redux".
In your package.json, specify the version of #types/react-redux as ./react-redux.fixed.
Run npm install. npm will make a symlink from node_modules/#types/react-redux to react-redux.fixed.
Compared to just editing the file in node_modules/#types/react-redux, this way npm knows you are using a modified version of the package and won't overwrite it. (This process deserves to be widely known; I'll find a better place to document it if I have time.)
I solved this by downgrading to Redux 3.7. It has proper typings (There still aren't typings for Redux 4.0). There are some Github issues where they discuss about it (here and here).
I fully reinstalled all my application and now I have a problem to build react application.
The problem file has the following view:
import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import {createStore, combineReducers, applyMiddleware} from "redux";
import createLogger from "redux-logger";
import App from "./components/App.jsx";
import * as reducers from "./reducers";
import types from "./constants/actions";
import message from "./constants/message";
import mid from "./middleWare/mid";
const logger = createLogger();
const reducer = combineReducers(reducers);
const store = createStore(
reducer,
{
userName: 'N/A',
error: '',
info: '',
services: [],
carwashes: [],
backUrl : ''
},
applyMiddleware(mid, logger)
);
const destination = document.querySelector("#container");
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
destination
);
Do you have any idea what was missed ?
React, redux and react-redux were installed
This looks more like an issue with es6. You may be missing some of the babel packages you may have had globally installed. Fully delete the node_modules folder and then do a yarn install.
This is not complaining about the Provider, it's complaining about the < arrow