I'm working on react native to build an application. for this reason i used react-router-redux but i get two crazy warning that it says: Warning: ignores the history prop. to use a custom history , use 'import {Router}' instead of 'import{MemoryRouter as Router}'
this is my code:
my index.android.js:
import {AppRegistry} from 'react-native';
import Home from './app/components/Home';
AppRegistry.registerComponent('myCode', () => Home);
my Home:
import React, { Component } from 'react';
import { NativeRouter as Router, Route } from 'react-router-native';
import createHistory from 'history/createMemoryHistory';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from '../config/store';
import launch from './launch';
import Dinner from '../components/Dinner';
export default class Home extends Component {
render() {
const history = createHistory();
const store = configureStore(history);
const appHistory = syncHistoryWithStore(history, store);
return (
<Provider store={store}>
<Router history={appHistory}>
<Route path="/" component={launch}>
<Route path="dinner" component={Dinner} />
</Route>
</Router>
</Provider>
);
}
}
and this is my store.js:
import { applyMiddleware, createStore } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import reducer from '../reducers/index';
export default function configureStore(history) {
const middleware = applyMiddleware(
promiseMiddleware(),
thunk,
routerMiddleware(history));
return createStore(reducer, {}, middleware);
}
i created a reducers which support all type of reducers:
const initialState = {
data: {},
error: null,
fetching: false,
fetched: false,
};
export default function reducer(state=initialState, action) {
switch (action.type) {
case (action.type.match(/^.*_PENDING$/) || {}).input:
// Action is pending (request is in progress)
return {...state, fetching: true};
case (action.type.match(/^.*_FULFILLED$/) || {}).input:
// Action is fulfilled (request is successful/promise resolved)
return {
...state,
data: action.payload.data,
fetched: true,
fetching: false};
case (action.type.match(/^.*_REJECTED$/) || {}).input:
// Action is rejected (request failed/promise rejected)
return {
...state,
error: action.payload,
fetched: false,
fetching: false
};
default:
return state;
}
};
By removing react-router-redux package and installing react-router-redux": "^5.0.0-alpha.6 the problem solved but the other thing that i care in this part is that this version doesn't have syncHistoryWithStore method so in this part i changed App like this:
import React, {Component} from 'react';
import {Route} from 'react-router-native';
import createHistory from 'history/createMemoryHistory';
import {Provider} from 'react-redux';
import {Switch} from 'react-router'
import {ConnectedRouter} from 'react-router-redux';
import configureStore from './store';
import Home from './components/Home';
import About from './components/About';
export default class App extends Component {
render() {
const history = createHistory();
const store = configureStore(history);
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</ConnectedRouter>
</Provider>
);
}
}