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

EN

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;
}

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 };
};

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 } />