1
これらの技術に新しく、私のシングルページアプリケーションに関する質問があります。私は、このテンプレートからreactredux例を開始しました：Redux + React + Typescript - ナビゲーションバーの選択されたインデックス状態を保存する適切な方法
私のSPAのルートコンポーネントは、レイアウトです。 NavMenuはレイアウトの下にあり、RightNavMenuオブジェクトの直下にあります。 RightNavMenuがNavMenuの状態に応じて変化、Iセットアップので、レイアウトレベルで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）は次のとおりです。 import {Action、Reducer}から 'redux'をインポートします。ここで
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 } />
私が間違っていることを教えてもらえますか？私は現在、選択したインデックスをリストの先頭に出力しようとしています。ユーザーがリストの最初または2番目の項目をクリックすると、選択した索引テキストがそれに応じて更新されると考えられます。
質問：
私はレイアウトと右のナビゲーションバーで正しくナビゲーションバー構造を実装していますか？
私はどのように動作させることができますか？
ありがとうございます。