ReactJS - Реквизит не был передан компоненту

Question

У меня есть приложение с response-router-dom, connected-Reaction-router и Reaction-redux, у меня все они обновлены до последней доступной стабильной версии.

Сейчас по какой-то причине хранилище не передается дочернему компоненту ConnectedRoute.

package.json

{
  ...,
  "connected-react-router": "^6.3.2",
  "react-redux": "^6.0.1",
  "react-router-dom": "^4.3.1",
  ...,
}

reducer.js

export default history => combineReducers({
  router: connectRouter(history),
  agent,
  ...,
});

configureStore.js

export const history = createBrowserHistory();

const initialState = {};
const enhancers = [];
const middleware = [apiAuthInjector, promise, thunk, routerMiddleware(history), logger];

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(createRootReducer(history), initialState, composedEnhancers);

export default store;

App.js

class App extends Component {
  componentDidMount() {
    const { onSetSession } = this.props;
    const username = Cookies.get('username');
    const token = Cookies.get('token');
    username && token && onSetSession({ username, token });
  }

  render() {
    return (
      <Switch>
        <PrivateRoute exact path="/" component={Funnel} />
        <Route exact path="/login" component={Login} />
      </Switch>
    );
  }
}

export default App;

index.js

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.querySelector('#root'),
);

PrivateRoute.js

class PrivateRoute extends React.Component {
  componentDidMount() {
    const { username, token, isFetching, onValidateSession } = this.props;
    !isFetching && onValidateSession({ username, token });
  }

  render() {
    const { username, component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props => (username ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
              search: props.location.search,
            }}
          />
        ))
        }
      />
    );
  }
}

export default PrivateRoute;

PrivateRouteContainer.js

import { connect } from 'react-redux';

import { validateSession } from 'actions/agent';

import PrivateRoute from './PrivateRoute';

const mapStateToProps = ({ agent }) => ({ ...agent });

const mapDispatchToProps = dispatch => ({
  onValidateSession: payload => dispatch(validateSession(payload)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PrivateRoute);

Ребята, вы понимаете, что я делаю не так с этой настройкой? Похоже, что они описали в своих документах, но когда я вижу console.log (this.props), я получаю только реквизиты, связанные с историей, и ничего больше.

Answer 1

Вы не подключили компонент с избыточным хранилищем, как это

const mapStateToProps = state => ({
  pathname: state.router.location.pathname,
  search: state.router.location.search,
  hash: state.router.location.hash,
});

export default connect(mapStateToProps)(PrivateRoute);