table-container.js
const mapDispatchToProps = (dispatch, { speedService }) => {
 return {
   fetchSpeed: fetchSpeed(speedService, dispatch),
   handleClick: (name) => dispatch(openModalGosbs(name))
 };
};
export default compose(withSpeedService(), connect(mapStateToProps, mapDispatchToProps))(TableContainer);

index.js
ReactDOM.render(
 <Provider store={store}>
   <SpeedServiceProvider value={speedService}>
     <Router>
       <App />
     </Router>
   </SpeedServiceProvider>
 </Provider>
 , document.getElementById('root'));

with-speed-service.js
const withSpeedService = () => (Wrapped) => {
 return (props) => {
   return (
     <SpeedServiceConsumer>
       {
         (speedService) => {
           return (<Wrapped {...props}
                    speedService={speedService}/>);
         }
       }
     </SpeedServiceConsumer>
   );  }};
export default withSpeedService;

Как можно пробросить props всем детям

В этом примере как чтобы Home внутри имел доступ к activePanel?

фигасе

а зачем функция fetchSpeed принимает speedService в аргументах?

actions.js
const fetchSpeed = (SpeedService, dispatch) => () => {
 dispatch(speedRequested());
 SpeedService.getSpeed()
   .then((data) => dispatch(speedLoaded(data)))
   .catch((err) => dispatch(speedError(err)))
};

привет,

import { ReactComponent as Icon } from 'img.svg';

стоит иморт свг, стоит плагин

  "^.+\\.svg$": "jest-svg-transformer"

но jest непонимает свг все равно, можно фиксануть?

actions.js
const fetchSpeed = (SpeedService, dispatch) => () => {
 dispatch(speedRequested());
 SpeedService.getSpeed()
   .then((data) => dispatch(speedLoaded(data)))
   .catch((err) => dispatch(speedError(err)))
};

почему SpeedService передаётся, а speedRequested, speedLoaded и speedError — нет?

а зачем, если все это отрабатывает через экшены?

я понимаю, как оно используется. только зачем? подразумевается, что если передать massService, то fetchSpeed будет фетчить массу?

я об этом не думал, но получается да. Но это не отменяет вопроса, если мне нужно несколько сервисов передать

без разницы — как удобнее, так и делай

так я и спрашиваю, как принято? и вообще, провайдеры в роуты пихают?

table-container.js
const mapDispatchToProps = (dispatch, { speedService }) => {
 return {
   fetchSpeed: fetchSpeed(speedService, dispatch),
   handleClick: (name) => dispatch(openModalGosbs(name))
 };
};
export default compose(withSpeedService(), connect(mapStateToProps, mapDispatchToProps))(TableContainer);

index.js
ReactDOM.render(
 <Provider store={store}>
   <SpeedServiceProvider value={speedService}>
     <Router>
       <App />
     </Router>
   </SpeedServiceProvider>
 </Provider>
 , document.getElementById('root'));

with-speed-service.js
const withSpeedService = () => (Wrapped) => {
 return (props) => {
   return (
     <SpeedServiceConsumer>
       {
         (speedService) => {
           return (<Wrapped {...props}
                    speedService={speedService}/>);
         }
       }
     </SpeedServiceConsumer>
   );  }};
export default withSpeedService;

принято не заводить контексты для таких целей. при необходимости провайдеры можно просунуть где угодно. обычно в приложении есть только рутовые провайдеры

Вместо провайдеров сервисов я бы через extra argument передал бы апишку в санки

подробнее где почитать? я ж нуб

Всем привет. Как в ts дать переменной 2 типа данных (null or object)