1

NASAのデイサービスの写真（ https://api.nasa.gov/api.html#apod ）から投稿された写真を表示する簡単なアプリを構築しようとしています。現在、キープレスを監視し、キープレスが左、上、右、または下であることに基づいて、日付 ​​(および非同期的に画像) を変更します。これらは、対応して、週または日で表される日付を変更します (一度に 1 マスずつカレンダーを移動することを想像してください)。

私が問題を抱えているのはこれです:次の潜在的な日付を取得するために非同期アクションクリエーターを作成しましたが、アプリケーションの現在の状態と新しい日付を取得するためのキープレスを知る必要があります。これをアクション作成者にカプセル化する方法はありますか? または、アクション作成者がアプリケーションの状態を認識しないように、エクスポートされたアクション作成者が呼び出されるアプリケーションの状態をアプリケーションに配置する必要がありますか? componentDidMountトップレベルの keydown 関数をバインドすることでこれを実行しようとしましたComponentが、アプリケーション ストアへのバインドはレデューサーで発生する変更を反映していないようです。

redux-thunk ミドルウェアと q に依存する非同期ロジック:

// This function needs to know the current state of the application
// I don't seem to be able to pass in a valid representation of the current state
function goGetAPIUrl(date) {
   ...
}

function getAsync(date) {
  return function (dispatch) {
    return goGetAPIUrl(date).then(
      val => dispatch(gotURL(val)),
      error => dispatch(apologize(error))
    );
  };
}

export default function eventuallyGetAsync(event, date) {
  if(event.which == 37...) {
    return getAsync(date);
  } else {
    return {
      type: "NOACTION"
    }
  }
}

ここに、gridAppState へのトップ レベルのバインディングと、関連する可能性があるトップ レベルで発生するその他のものがありますが、私にはよくわかりません。

class App extends React.Component {
  componentDidMount() {
    const { gridAppState, actions } = this.props;
    document.addEventListener("keydown", function() {
      actions.eventuallyGetAsync(event, gridAppState.date);
    });
  }
  render() {
    const { gridAppState, actions } = this.props;
    return (
        <GridApp gridAppState={gridAppState} actions={actions} />
    );
  }
}

App.propTypes = {
  actions: PropTypes.object.isRequired,
  gridAppState: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    gridAppState: state.gridAppState
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(GridActions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

正しく変更された日付オブジェクトがレデューサーに到達していることを確認しましたが、gridAppState はロードされた最初の日付でスタックしているようです。

イベント ハンドラと現在のアプリケーション状態のアタッチに依存する redux で非同期ロジックにアプローチする正しい方法は何ですか? 3つすべてを行う正しい方法はありますか？

4

1 に答える 1

2

コンポーネントでイベントを処理し、押されたキーに応じて正しいアクションを呼び出す必要があります。

したがって、非同期アクションをディスパッチすると、次のようなことができます

export default function getNextPhoto(currentDate) {
  return (dispatch) => {
    const newDate = calculateNewDate(currentDate);

    dispatch(requestNewPhoto(newDate));

    return photosService.getPhotoOfDate(newDate)
    .then((response) => {
      dispatch(newPhotoReceived(response.photoURL);
    });
  };
}

コンポーネントで keypress イベントを処理し、新しい写真を取得する必要があることがわかっているときにアクションをディスパッチする必要があります。

あなたのアプリは次のようになります

class App extends React.Component {
  componentDidMount() {
    const { gridAppState, actions } = this.props;
    document.addEventListener("keydown", function() {
      if (event.which == 37) {
        actions.getNextPhoto(gridAppState.date);
      } else if (...) {
        actions.getPrevPhoto(gridAppState.date);
      }

      // etc
    });
  }
}

ちなみに、Redux Store で状態を更新するレデューサーがまだありません。

于 2016-02-18T17:15:11.487 に答える