Как получить доступ к избыточному хранилищу вне компонента в React + ASP.NET Core + TypeScript?

Question

У меня есть некоторый опыт работы с React, но я очень плохо знаком с использованием Redux. Однако Visual Studio 2017 имеет встроенный шаблон React + Redux в .NET Core 2.0 .

Некоторая информация о моем окружении:

• Визуальная студия 2017
• Реакция 15.6.1
• машинопись 2.4.1
• Избыток 3.7.1
• реаги-редукс 5.0.5

Проект настраивает все для меня, и я могу запустить его без ошибок, пока все хорошо.

У меня только простой вопрос. Пожалуйста, проверьте это изображение ->

Когда я нажимаю на кнопку счетчика

1. Следует обновить счетчик (по умолчанию это делает asp.net)
2. Тот же номер должен отображаться рядом с заголовком «WebApplication10»

Например: WebApplication10 (3)

Цель этой попытки - понять, как получить доступ к хранилищу резервов из совершенно другого компонента.

Я пытался что-то на компоненте NavMenu , например:

type CounterProps =
    CounterStore.CounterState
    & typeof CounterStore.actionCreators
    & RouteComponentProps<{}>;

и изменил строку определения класса так же, как это

export class NavMenu extends React.Component<CounterProps, {}> {
    public render() {
        return <div>//rest of the code</div>;
    }
}

Выполнение этого дает мне лишь небольшую ошибку:

ERROR in [at-loader] ./ClientApp/components/Layout.tsx:9:21 
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavMenu> & Readonly<{ children?: ReactNode; }> & R...'.

Надеюсь, вы поняли мой вопрос и простите меня, если я не предоставил все детали для решения этой проблемы. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще.

Спасибо, что прочитали. С наилучшими пожеланиями.

Answer 1

1. Поскольку нам нужно обернуть компонент контейнера вокруг необработанного NavMenu, самый простой способ - переименовать ваше необработанное NavMenu в NavMenuComponent

   class NavMenuComponent extends React.Component<CounterProps, {}> {
       public render() {
           return <div className='main-nav'>
                   <div className='navbar navbar-inverse'>
                   <div className='navbar-header'>
                       <!-- ...  -->
                       <Link className='navbar-brand' to={ '/' }>WebApplication10 <span>{this.props.count}</span></Link>
                   </div>
                   <!-- ...  -->
               </div>
           </div>;
       }
   }
   

   и затем экспортируйте новую упакованную NavMenu:

   export const NavMenu = connect(
       (state: ApplicationState) => state.counter, 
       CounterStore.actionCreators                 
   )(NavMenuComponent);
   
   export default NavMenu;
   

2. В качестве примечания вам не нужно добавлять такие типы, как typeof actionCreators или RouteComponentProps:

   type CounterProps =
       CounterStore.CounterState
       & typeof CounterStore.actionCreators
       & RouteComponentProps<{}>;
   

   Поскольку NavMenu читает только CounterState.count, никаких дополнительных действий или маршрутов не требуется. Просто используйте следующий код для определения CounterProps

    type CounterProps =
       CounterStore.CounterState;
   

   Если вы хотите добавить пользовательские действия в будущем, просто добавьте действия, которые вам нравятся:

   type CounterProps =
       CounterStore.CounterState
       & your action type;