Reactjs（web）内の機能コンポーネントに関するRedux

Question

私はこの質問を書いています。私はあなたの機能コンポーネントにreduxを使用する方法についていくつかの助けを求めます。私はReactコンポーネントで他の例を見てきましたが、機能コンポーネントに "store"値を取得する方法を理解できません。

私の考えは、状態を確認し、私の機能性成分の内側に、UIを操作するには、私の

store.getStateを（）

使用することですが、私はそれを実現することができません。

お願いします。例えば

、機能性成分：

import React from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Header.css'; 
import { Navbar, Nav } from 'react-bootstrap'; 
import HeaderMenu from '../HeaderMenu'; 
import cx from 'classnames'; 

function Header() { 
    return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}> 
     <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav> 
     <HeaderMenu /> 
    </Navbar> 
); 
} 

export default withStyles(s)(Header); 

私は私のヘッダーコンポーネント内「ストア」オブジェクトを使用するにはどうすればよいですか？それは私のアプリケーションコンポーネントで動作します、私は自分のコンポーネント内でそれを使用する方法を知らないだけです。

私の質問は以下のとおりです。

• 私が代わりに状態を取得するためのアクションを使用すべき？
• ストアオブジェクトコンポーネントをコンポーネントプロパティに渡す必要がありますか？

ありがとうございます！

編集：私はReduxのブランチにhttps://github.com/kriasoft/react-starter-kit を使用しています

ダンアブラモフ監督は、彼のめちゃくちゃ有名なEgghead.ioシリーズで述べたようにhttps://github.com/kriasoft/react-starter-kit/tree/feature/redux

Answer 1

、プレゼンテーションコンポーネントはReduxのストアとshouldnを認識すべきではありません」直接使用しないでください。あなたはshould create something called container component、プロパティを介して必要な状態フィールド+アクションコールバックをあなたのプレゼンテーションコンポーネントに渡します。

Dan AbramovのEgghead.ioシリーズをご覧になることをお勧めします。彼が記述しているパターンは、現時点でReact + Reduxアプリケーションを書くための事実上の標準スタイルのガイドです。

Answer 2

ボイラープレートプロジェクトに含まれる個々のモジュール/コンポーネントを理解するようにしてください。あなたは、私がお勧め反応する新しい（およびその相補ライブラリ）であれば、あなたはここから：

• https://github.com/petehunt/react-howto

Reduxのために：

• http://redux.js.org/

これらは両方ともstackoverflowに関する反応関連の質問の大半を明らかにする大きなリソース。

Answer 3

react-redux libraryを使用できます。connectを使用すると、storeデータにコンポーネントの小道具としてアクセスすることができます。これは簡単で効率的です。

Answer 4

機能コンポーネント上でRedux状態を取得するには、コンポーネントとReduxを手動で接続する必要がありますが、これは非常に面倒です。あなたはあなたのReact Component内のreducer変数にアクセスしなければならないでしょう。つまり、他の設定の中のコンポーネントファイルにレデューサーをインポートすることです。

これは、アクションクリエイター、ミドルウェアを通じて自動的にアクションをディスパッチするなど、通常得られる他の利点を妨げることになります。

React-Reduxに付属しているProvider Componentを使用して、ヘッダーコンポーネントをコンテナに変換するだけです。コンテナは、ストアに加えられた変更を「リッスン」する反応コンポーネントです。基本的には、レデックスストアに直接接続されている上位コンポーネントにヘッダーコンポーネントをラッピングしています。

この方法はスケーラビリティが高いため、React/Reduxプロジェクトで使用できるボイラープレートファイルを簡単に作成できます。