Question

我正在尝试使用react-router-redux和Immutable.js reducer建立路由。

我使用syncHistoryWithStore设置商店，当我点击Link时，我可以看到调度了正确的@@router/LOCATION_CHANGE操作，商店已正确更新将位置信息添加到基本reducer的路由键，并且URL正在更改为正确的位置。

但新路径的子组件不会呈现。上一个路径的组件仍然在屏幕上呈现。他们也没有重新渲染，他们只是留下来。当我查看传递给父组件的道具时，location道具仍会显示上一条路线。这就好像redux行动被解雇了，什么都没发生。没有新的道具被传下来。

这是我的 app.js

import configureStore from './config.redux/store';

// import selector for 'syncHistoryWithStore'
import { makeSelectLocationState } from './config.redux/selectors';
// root app
import App from './App';

import { createRoutes} from 'config.routes/routes';

// create redux store with history
const initialState = {};
const store = configureStore(initialState, browserHistory);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: makeSelectLocationState(),
});
history.listen(location => {
    console.log(location);
});
const rootRoute = createRoutes(store);

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider>
            <Router
                history={history}
                routes={rootRoute}
                render={
                    // Scroll to top when going to new page, imitating default browser behavior
                    applyRouterMiddleware(useScroll())
                }
            />
        </MuiThemeProvider>
    </Provider>, document.getElementById('app')
);

store.js

const sagaMiddleware = createSagaMiddleware();
 const logger = createLogger();

 export default function configureStore(initialState = {}, history) {
    // Create store with middleware
    const middlewares = [
        sagaMiddleware,
        logger,
        routerMiddleware(history) 
    ];

    const enhancers = [
        applyMiddleware(...middlewares)
    ];

    // If Redux DevTools Extension is installed use it, otherwise use Redux compose
    /* eslint-disable no-underscore-dangle */
    const composeEnhancers =
        process.env.NODE_ENV !== 'production' &&
        typeof window === 'object' &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
    /* eslint-enable */

    const store = createStore(
        createReducer(),
        fromJS(initialState),
        composeEnhancers(...enhancers)
    );

    // Extensions
    store.runSaga = sagaMiddleware.run;
    store.asyncReducers = {}; // async reducer registry
    // Make reducers hot reloadable, see http://mxs.is/googmo
    /* istanbul ignore next */
    if (module.hot) {
        module.hot.accept('./reducers', () => {
            require('./reducers').then((reducerModule) => {
                const createReducers = reducerModule.default;
                const nextReducers = createReducers(store.asyncReducers);

                store.replaceReducer(nextReducers);
            });
        });
    }

    return store;
}

reducers.js

 // initial routing state
  const routeInitialState = fromJS({
      locationBeforeTransition: null,
  });

  // merge route into the global application state
  function routeReducer(state = routeInitialState, action) {
      switch(action.type) {
        case LOCATION_CHANGE:
            return state.merge({
                locationBeforeTransition: action.payload,
            });
        default:
            return state;
      }
  }

  /**
   * Create the main reducer with async loaded ones
   * 
   */
  export default function createReducer(asyncReducers) {
      return combineReducers({
          routing: routeReducer,
          auth: globalReducer,
          ...asyncReducers
      });
  }

有什么想法吗？我一直试图解决这个问题几天。

反应路由器-终极版; redux存储和历史记录未正确同步

0 个答案: