In react-native-navigation 7.14.0, the Navigation.registerComponentWithRedux has been deprecated and it suggested that registerComponentWithRedux is deprecated and will be removed in the next version! Please use Navigation.registerComponent instead. Visit the docs for more information https://wix.github.io/react-native-navigation/api/component#registering-a-component-wrapped-with-providers
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);
It was working fine with registerComponentWithRedux with the deprecated warning. To get rid of the warning, I changed registerComponentWithRedux to the following and it crashed on app launched with React is not defined. Am I doing something wrong or there is a bug for registerComponent with redux provider?
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
Navigation.registerComponent(ScreenEnum.HOME_SCREEN, () => (props) =>
<Provider store={store}>
<HomeScren {...props} />
</Provider>,
() => HomeScren);
Try:
import React from 'react';
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
Navigation.registerComponent(ScreenEnum.HOME_SCREEN, () => (props) =>
<Provider store={store}>
<HomeScreen {...props} />
</Provider>,
() => HomeScreen);
Also note in your second example your HomeScreen component is mispelled.
Related
I am trying to integrate Routes using React Router in Meteor Project. I have followed the Meteor React documentation but somehow its not working. Have tried with "Router" instead of "BrowserRouter" but no luck. Any suggestions on this.
imports/startup/client/routes.js
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App, City , NotFound from "respective-modules";
export const renderRoutes = () => {
<BrowserRouter>
<div>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/city" component={City} />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>;
client/main.html
<body>
<div id="react-target"></div>
</body>
client/main.jsx
import { renderRoutes } from "/imports/startup/client/routes.js";
Meteor.startup(() => {
render(renderRoutes(), document.getElementById("react-target"));
});
But a blank page is getting appeared.
If the code you are showing is correct (i.e., copied accurate from what you are running), then you just have an extra curly bracket:
export const renderRoutes = () => {
<BrowserRouter>
needs to be either:
export const renderRoutes = () =>
<BrowserRouter>
or
export const renderRoutes = () => {
return <BrowserRouter>
Goal
To click the next button and dispatch two actions to the redux store that:
Firstly, update the skipAmount value.
And then use the updated skipAmount value to generate apiQuery (a string that is being used to make a request to a server).
Problem
The skipAmount value is not being updated between action 1 & 2
Example
I have created a CodeSandbox that clear demonstrates the issue that I am having. Notice that the skipAmount value is 100 (or one click event) ahead of apiQuery.
https://codesandbox.io/s/o2vvpwqo9
Code
Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import App from "./App";
import reducer from "./reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
App.js
import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps = state => ({
...state,
});
const queryGenerator = props => `www.apiExample.com?skipAmount=${props.skipAmount}`;
const ConnectedApp = props => (
<div className="App">
<button
onClick={() => {
props.dispatch({ type: 'SET_SKIP_AMOUNT_PLUS_100' });
props.dispatch({ type: 'SET_API_QUERY', payload: queryGenerator(props) });
}
}
>
Next
</button>
<p>Skip amount on redux: {props.skipAmount}</p>
<p>Query being generated: {props.apiQuery}</p>
</div>
);
export default connect(mapStateToProps)(ConnectedApp);
reducer.js
const reducerDefaultState = {
skipAmount: 0,
apiQuery: 'www.apiExample.com',
};
export default (state = reducerDefaultState, action) => {
switch (action.type) {
case 'SET_SKIP_AMOUNT_PLUS_100':
return {
...state,
skipAmount: state.skipAmount + 100,
};
case 'SET_API_QUERY':
return {
...state,
apiQuery: action.payload,
};
default:
return state;
}
};
In App.js queryGenerator(props) you are passing the unchanged props from the onClick.
props are'nt changing from SET_SKIP_AMOUNT_PLUS_100 until rerender.
onClick={() => {
props.dispatch({ type: 'SET_SKIP_AMOUNT_PLUS_100' });
props.dispatch({ type: 'SET_API_QUERY', payload: queryGenerator(props) });
}
In 'SET_SKIP_AMOUNT_PLUS_100' you are changing the redux state. (not the current props in component),
and in 'SET_API_QUERY' your are using the components props (not what's in redux) because props has'nt updated yet.
I am using React-Router v4. However, whenever my applications Redux state is updated, React-Router's Switch component is updating and re-mounting the current route.
I define my HashRouter at in the main index.js file, like so:
/* global document */
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import App from './screens/app/index'
import registerServiceWorker from './registerServiceWorker'
import './styles/main.css'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>,
document.getElementById('root'),
)
registerServiceWorker()
This is my component using the Switch component:
import PropTypes from 'prop-types'
import React from 'react'
import { Route, Switch } from 'react-router-dom'
const propTypes = {
routes: PropTypes.arrayOf(PropTypes.shape({
path: PropTypes.string,
name: PropTypes.string,
container: PropTypes.object,
exact: PropTypes.bool,
})).isRequired,
}
const Router = ({ routes }) => (
<Switch>
<div className="container">
{routes.map(route => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={() => route.container}
/>
))}
</div>
</Switch>
)
Router.propTypes = propTypes
export default Router
And finally, I setup my store here:
import { createStore } from 'redux'
import reducer from './reducers/index'
export default createStore(reducer)
I was thinking possible issues could be:
There an issue with my Redux setup that is causing a collision with the redux store
The Routes aren't defined correctly
I suspect this is the line that remounts the component everytime
component={() => route.container}
try
const Router = ({ routes }) => (
<Switch>
<div className="container">
{routes.map(route => {
const routerComp = () => route.container
return (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={routerComp}
/>
)
})}
</div>
)
I'm experiencing an issue using Meteor's createContainer with React Router v4. I've used it successfully with v3, but when I try to set up routing with v4 it loads the Main route and then won't render anything else. If I change App to a functional stateless component and bypass the data layer, the routing works fine, so I know it's something in there.
App.jsx:
import React from 'react'
import {Navigation} from './Navigation'
import {Grid, MenuItem} from 'react-bootstrap'
import {LinkContainer} from 'react-router-bootstrap'
import { createContainer } from 'meteor/react-meteor-data'
import {Products} from '../api/products'
import {Main} from './Main'
class App extends React.Component {
render () {
const {ready, products} = this.props;
if (!ready) return <h1>Loading...</h1>
const vendorsList = [...new Set(products.map(item => item.vendor).filter(i => !!i))]
const vendors = vendorsList.map((item, index) => <LinkContainer key={index} to={`/vendors/${item}`}><MenuItem eventKey={(index+1) / 10 + 4}>{item}</MenuItem></LinkContainer>)
return (
<div>
<Navigation vendors={vendors} />
<Grid>
<Main products={products} />
</Grid>
</div>
)
}
}
export default createContainer(({params}) => {
const handle = Meteor.subscribe('products');
return {
ready: handle.ready(),
products: Products.find({}, {sort: {name: 1}}).fetch()
};
}, App);
Navigation.jsx:
import React from 'react'
import {NavLink} from 'react-router-dom'
import {Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'
import {LinkContainer} from 'react-router-bootstrap'
export const Navigation = ({vendors}) => (
<Navbar>
<Navbar.Header>
<LinkContainer to='/'><Navbar.Brand>IM 0.1</Navbar.Brand></LinkContainer>
</Navbar.Header>
<Nav>
<NavDropdown eventKey={1} title='Products' id='basic-nav-dropdown'>
<LinkContainer to='/products'><MenuItem eventKey={1.1}>Products List</MenuItem></LinkContainer>
<LinkContainer to='/products/new'><MenuItem eventKey={1.2}>Enter New Product</MenuItem></LinkContainer>
</NavDropdown>
<NavItem eventKey={2}>Inventory</NavItem>
<NavDropdown eventKey={3} title='Invoices' id='basic-nav-dropdown'>
<MenuItem eventKey={3.1}>Enter New Invoice</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.2}>Manage Invoices...</MenuItem>
</NavDropdown>
<NavDropdown eventKey={4} title='Vendors' id='basic-nav-dropdown'>
{vendors}
<MenuItem divider />
<MenuItem eventKey={(vendors.length + 1)/10 + 4}>Vendors List...</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
)
main.js:
import React from 'react'
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from '../imports/ui/App'
Meteor.startup(() => {
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('render-target'));
});
I know I'm missing something that's probably super basic, and it's driving me nuts. Thanks.
Try wrapping App.jsx with withRouter
Also note that Meteor createContainer function has been replaced by withTracker
import React from 'react'
import { withTracker } from 'meteor/react-meteor-data';
import { withRouter } from 'react-router-dom';
...
class App extends React.Component {
...
}
export default withRouter(withTracker(({params}) => {
...
})(App));
I am setting up a simple React/Redux app. Here is my setup:
var {createStore, applyMiddleware } = require('redux')
var thunkMiddleware = require('redux-thunk')
var store = createStore(
reducers,
applyMiddleware(thunkMiddleware)
)
class App extends React.Component {
render() {
return (
<Provider store={store}>
<HashRouter>
<div className="app">
<Route exact path='/' component={Home}/>
<Route path='/Test' component={Test}/>
</div>
</HashRouter>
</Provider>
);
}
}
Also, here are my reducers:
var {combineReducers} = require('redux')
const carlist = (state=[], action) => {
switch (action.type){
case 'LOAD':
return action.test
default:
return state
}
}
module.exports = combineReducers({carlist})
When I run my app, I get this error:
applyMiddleware.js:39 Uncaught TypeError: middleware is not a function
What am I missing?
the problem looks like it might be here:
var thunkMiddleware = require('redux-thunk')
Your middleware -- here thunkMiddleware -- is not a function, suggesting that it is not being pulled from the package. You should try:
var thunkMiddleware = require('redux-thunk').default
Or, try using ES6 module syntax (since you are already using ES6 features):
import thunkMiddleware from 'redux-thunk'
I had this error when using redux-logger
I had just upgraded my packages and change
import createLogger from 'redux-logger'
to
import { createLogger } from 'redux-logger'