Redux + React + Typescript - 保存导航栏选定索引状态的正确方法是什么

Question

对这些技术不熟悉，并且对我的单页应用程序有疑问。我从这个模板中的 reactredux 示例开始：

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

我的 SPA 的根组件是布局。 NavMenu 和 RightNavMenu 对象一样位于布局的正下方。 RightNavMenu 会根据 NavMenu 的状态而变化，因此我在布局级别设置 NavMenu 存储，如下所示：

index.ts:

import * as NavMenu from './NavMenu';

// The top-level state object
export interface ApplicationState {       
navMenu: NavMenu.NavMenuState //-stores information on which index is currently selected
}

// Whenever an action is dispatched, Redux will update each top-level application state property using
// the reducer with the matching name. It's important that the names match exactly, and that the reducer
// acts on the corresponding ApplicationState property type.
export const reducers = {
navMenu: NavMenu.reducer
};

// This type can be used as a hint on action creators so that its 'dispatch' and 'getState' params are
// correctly typed to match your store.
export interface AppThunkAction<TAction> {
(dispatch: (action: TAction) => void, getState: () => ApplicationState): void;
}

这是我的 NavMenu 商店 (NavMenu.ts)： 从 'redux' 导入 { Action, Reducer };

export interface NavMenuState {
selectedIndex: number;    
}

interface SelectIndexAction { type: 'NAV_SELECT_INDEX' }
interface DoNothingAction { type: 'NAV_DO_NOTHING' }

type KnownAction = SelectIndexAction | DoNothingAction;

export const actionCreators = {
select: (selectedIndex:number) => <SelectIndexAction>{ type: 'NAV_SELECT_INDEX' },
donothing: () => <DoNothingAction>{ type: 'NAV_DO_NOTHING' }
};

export const reducer: Reducer<NavMenuState> = (state: NavMenuState, action: KnownAction) => {
switch (action.type) {
    case 'NAV_SELECT_INDEX':
        alert('hasdf');
        return { selectedIndex: state.selectedIndex };        
    case 'NAV_DO_NOTHING':
        return { selectedIndex: state.selectedIndex };
    default:
        // The following line guarantees that every action in the     KnownAction union has been covered by a case above
        const exhaustiveCheck: never = action;
}

// For unrecognized actions (or in cases where actions have no effect), must return the existing state
//  (or default initial state if none was supplied)
return state || { selectedIndex: 0 };
};

这是我的 NavMenu.tsx 组件：

import * as React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import { List, ListItem, makeSelectable } from 'material-ui/List';
import * as NavMenuStore from '../store/NavMenu';

let SelectableList = makeSelectable(List);
type NavMenuProps = NavMenuStore.NavMenuState
& typeof NavMenuStore.actionCreators
& { params: { startIndex: string } };       // ... plus incoming routing      parameters


export class NavMenu extends React.Component<NavMenuProps, null> { 
componentWillMount() {

    // This method runs when the component is first added to the page
    let selectedIndex = parseInt(this.props.params.startIndex) || 0; //parse the int or set to 0 if it fails
    if (selectedIndex == 0) //if the parse fails select the first index by defaualt
        selectedIndex = 1;
    this.props.select(selectedIndex);
}  

public render() { 
    return (  
        <SelectableList defaultValue={1}>
            <p>Current index: <strong>{this.props.selectedIndex}</strong>        </p>
            <ListItem onClick={() => { this.props.select(1) }} value={1} primaryText="TestIndex1"   />              
            <ListItem onClick={() => { this.props.select(2) }} value={2} primaryText="TestIndex2"  />              
        </SelectableList>
    );
}

}

export default connect(
(state: ApplicationState) => state.navMenu, // Selects which state properties are merged into the component's props
NavMenuStore.actionCreators                 // Selects which action creators are merged into the component's props
)(NavMenu);

最后，这就是我将它嵌入到我的布局组件中的方式：

<NavMenu /> 

上面抛出了一个关于缺少属性的错误，所以我尝试更改为这个，但它仍然不起作用。

<NavMenu donothing={null} params={null} selectedIndex={0} select={ null } />

谁能告诉我我做错了什么？我目前只是试图在列表顶部输出选定的索引。当用户单击列表中的第一项或第二项时，我希望选定的索引文本会相应更新。

问题：

1. 我是否使用布局和右侧导航栏正确实现导航栏结构？

2. 我怎样才能让它工作？

谢谢。

Answer 1

这篇文章有点老了，但我想我会分享我的经验，以防其他人遇到这个问题。我为完全相同的问题解决了 2 天，终于成功了。

对我来说，这似乎归结为两件事。首先，我改变了：

export class NavMenu extends React.Component<NavMenuProps, null> { 

并去掉“export”关键字：

class NavMenu extends React.Component<NavMenuProps, null> { 

我猜想使用 export 关键字，当您在另一个组件中“导入 NavMenu”时，它会抓取实际的 NavMenu 类，而不是包装在 Redux 的 Connect 对象中的类。

此外，在标记中包含 NavMenu 的 Layout.tsx 文件中，我显然输入了错误的语句。我把它改成：

import NavMenu from './NavMenu';

所有这些现在都对我有用。 对不起，如果我的回答有点混乱或不准确。我对 React 很陌生，也不是什么 javascript 专家，所以请不要激怒我...