1

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; 
    } 
}; 

Répondre

1

En supprimant paquet réagir-routeur-Redux et l'installation de réagir-routeur-redux « : »^5.0.0-alpha.6 le problème résolu, mais l'autre chose que je me soucie de cette partie est que cette version n'a pas la méthode syncHistoryWithStore donc dans cette partie j'ai changé App comme ceci:

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> 
     ); 
    } 
}