Je travaille sur réactif pour créer une application. pour cette raison j'ai utilisé rea-router-redux mais j'ai deux fous avertissement qu'il dit: Attention: ignore l'historique prop. d'utiliser une histoire personnalisée, utilisez 'import {} Router' au lieu de '{import MemoryRouter comme routeur}'Avertissement: Le routeur de mémoire ignore les accessoires d'historique
voici mon code:
mes 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>
);
}
}
et voici mon 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 créé un réducteur qui prennent en charge tous les types de réducteurs:
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;
}
};