Redux: ドキュメント：Reactルーターでの使用

私はもともと、ユニバーサルコンテキストでreactルーターを使用するためのサーバー側レンダリングの例を作成しました。 反応ルーターでの使用はそれ自身の文書になる可能性があることが示唆されました。 おそらく、ドキュメントにセクションを追加できますか？

また、reactルーターが広く使われていることを示す例を追加することについてどう思いますか？

real-worldの例をユニバーサルに変更するのは良い考えだと思います。 そうすれば、最初から何も作成する必要がありません。

アクションクリエーターから移行する場合は、ルーターインスタンスをパラメーターとしてアクションクリエーターに渡します

明確にしたかったのですが、1.0betaにはcreateRouterの概念がないため、これは0.13でのみ機能します（まだ？）、正しいですか？

Reactコンポーネント内から1.0.0-beta3でそれを行うことができます。

class Thing extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleThing() {
    this.props.actionCreator(this.context.router);
  }
}

@timdorr this.contextを使用しても安全ですか？ 私はそれが外部で使用されることを意図されていなかったという印象を受けました。

はい、それは文書化されていないだけで、安全ではありません。 0.14でわずかに変更されていますが、これを壊すような方法ではありません。 近いうちに文書化されると思います。

@timdorrこれは、1.0.0-beta3のアクションクリエーターとは異なるURLに移行できることも意味しますか？

はい、ルーターインスタンスをアクションクリエーターに渡すと、トランジションを含め、ルーターインスタンスを使って好きなことを行うことができます。

私はこれを一緒に投げました：

const loginProps = {
  handleLogin: ({email, password}) => store.dispatch(userLogin({email, password})),
};



const routes = (
  <Route path="/" handler={App}>
    <Route path="login" handler={wrapper(Login, loginProps)} />
    <Route handler={authSection}>
      <Route path="" handler={Index} />
      <Route path="users" handler={wrapper(Users, (() => store.dispatch(getUsers())))} />
      <Route path="logout" handler={wrapper(Login, (() => store.dispatch(userLogout())))} />
    </Route>
  </Route>
);

const router = createRouter({
  location: HistoryLocation,
  routes,
});

store.dispatch(receiveRouter({router}));

Warning: Failed Context Types: Required context `store` was not specified in `SmartComponent(TodoApp)`. Check the render method of `Router`.

何が問題なのですか？

PS：RR 1.0.0-beta3

@gyzerok real-worldの例と同じように、 () => <Router>stuff</Router>全体を$＃ <Provider>にラップするようにしてください。

@gaearonはい、ofc。 私はそれをプロバイダーではなく、あなたのプロバイダーのコピー＆ペーストである私自身のコンポーネントでラップします。 違いは、ストアを渡すのではなく、その中にストアを作成することです。

@gyzerokコードを見ずに何が悪いのかを言うのは難しいです。 （そして、別の問題を提出してくださいreact-reduxリポジトリは良い場所です。）

real-wolrdの例のThx！ しかし、 AsyncPropsをどのように処理するのですか？ ダブルコンテキスト操作は一緒に機能しないようです。

import React from 'react';                                                                                                                                                                                         
import {createStore} from 'redux';                                                                                                                                                                                 
import {Provider} from 'react-redux';                                                                                                                                                                              
import {Router, Route} from 'react-router';                                                                                                                                                                        
import BrowserHistory from 'react-router/lib/BrowserHistory';                                                                                                                                                      
import AsyncProps from 'react-router/lib/experimental/AsyncProps';                                                                                                                                                 

import App from './containers/App';                                                                                                                                                                                
import reducers from './reducers';                                                                                                                                                                                 

const store = createStoreWithMiddleware(reducers);                                                                                                                                                                 
const history = new BrowserHistory();                                                                                                                                                                               

React.render(                                                                                                                                                                                                       
    <Provider store={store}>                                                                                                                                                                                        
        {() =>                                                                                                                                                                                                      
            <Router history={history} createElement={AsyncProps.createElement}>                                                                                                                                     
                <Route component={AsyncProps}>                                                                                                                                                                      
                    <Route path="/" component={App} />                                                                                                                                                              
                </Route>                                                                                                                                                                                            
            </Router>                                                                                                                                                                                               
        }                                                                                                                                                                                                           
    </Provider>,                                                                                                                                                                                                    
    document.body                                                                                                                                                                                                  
);

およびApp.js

import React from 'react';                                                                                                                                                                                         
import {connect} from 'react-redux';                                                                                                                                                                               

let App = React.createClass({                                                                                                                                                                                      
    statics: {                                                                                                                                                                                                     
        loadProps(params, cb) {                                                                                                                                                                                    
            // have to call this with AsyncProps                                                                                                                                                                   
        }                                                                                                                                                                                                          
    },                                                                                                                                                                                                             
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

export default connect(state => state)(App); 

connectラッパーがなくても機能しますが、 reduxもありません。 誰かがこの問題に直面しましたか？

または、データが読み込まれるまでナビゲーションを一時停止する他の方法はありますか？

静力学は単なる静力学です。 connect()の結果を含め、何にでも置くことができます。

let App = React.createClass({                                                                                                                                                                                      
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

App = connect(state => state)(App); 

App.loadProps = function loadProps(params, cb) {                                                                                                                                                                                    
  // have to call this with AsyncProps                                                                                                                                                                   
}                                                                                                                                                                                                          

export default App; 

@gaearon申し訳ありませんが、例がいっぱいではありません。 静的な小道具がない状態でconnectの結果を拡張しようとしましたが、コンテキストに実際の問題があります。 しばらくお待ちください。例全体を別のリポジトリにプッシュします

私が現在調査しているもう1つのことは、パラメーターを明確で目立たない方法でreduxストアに保存することです。 いくつかのアプローチを試した後、私は最終的に次のように書きました。

<Route
  component={OrderDetails}
  path='/orders/:orderId'
  onEnter={({params}) => store.dispatch(setCurrentOrder(params.orderId))} 
/>

したがって、以下のように、セレクターからパラメーターを参照することができます。

export const OrderDetails = state => {
  const {order} = state;
  return {
    order: order.details.get(order.currentOrderId),
    orderId: order.currentOrderId,
    isLoading: order.isLoadingDetails,
    error: order.detailsLoadingError
  };
};

より安定したreact-redux-routerがリリースされると、おそらく変更されます。

朗報：React Router 1.0 RCは、必要なフックを公開するようになりました。
https://github.com/acdlite/redux-react-routerをチェックして、今すぐ気に入ったかどうかをお知らせください。

@gaearon react-routerと実験的なAsyncPropsの問題を見つけました。 反応を更新すると問題が解決します

@wtfil知っておくと良い！

react-routerと統合するとき、このスレッドから、ルーターインスタンスをアクションクリエーターに渡し、そのメソッドを呼び出すことができることを理解しています。 ただし、アクションクリエーターは、最も純粋な形で副作用が発生しないように意図されていることも理解しています。 アクションクリエーターが副作用を起こすことが許されているのは、ミドルウェアによって処理される非同期アクションの場合だけです。 では、遷移を実行するアクションクリエーターは純粋関数ではなく非同期であることが期待されているのでしょうか。

では、遷移を実行するアクションクリエーターは純粋関数ではなく非同期であることが期待されているのでしょうか。

アクションの作成者は副作用を持つことが許可されています。 可能な限りそれらを避けるのが最善ですが、もちろんある時点でそれらが必要になります。レデューサーはReduxで純粋であり、Elmのような明示的なエフェクトメカニズムがないため（説明については＃569を参照）、アクションクリエーターはそれらを置く場所。

redux-routerをチェックしてください。 React Router上で動作しますが、アクションをディスパッチし、ルーターの同期を処理できます。

ReactルーターとReduxルーターの両方が1.0に達するのを待っています...

うん。 これが発生した後、レシピを追加します。

だから私はこの議論に従い、ルーティングが一般的にreduxにどのように適合するかについても少し考えています（https://github.com/rackt/redux/issues/805を参照）。 そのスレッドでのいくつかの議論といくつかの実験に基づいて、私はreact-router / react-redux-router接着剤よりも個人的に好むアプローチを見つけました。

基本的に、私はreact-routerやreduxにお互いの知識を与えず、代わりにカスタム履歴の実装を介してそれらを接続しようとします。 このアプローチでは、ルーティングは次のように処理されます。

1. routeに対して、ストア内のアクション、レデューサー、およびキーが作成されます。
2. 標準の履歴実装（この例では、優先されるcreateHistoryを使用しますが、 createHashHistoryなどを簡単に使用できます）が作成され、リッスンされます。 ブラウザの現在の場所が変更されると、ROUTEアクションがディスパッチされ、最終的にその場所がストアに配置されます。
3. 標準のreact-routerインスタンスは、ストアのrouteキーが変更されたときにサブスクライバー（react-router）に通知する2番目のカスタム履歴実装を使用して作成されます。 また、 createHrefとpushStateを定義し、両方を手順2で作成した標準の履歴に委任します。

それでおしまい。 これにより、reduxとreact-routerの間の職務がかなり明確に分離され、別の「接着剤」ライブラリーを取り込む必要がなくなると思います。 以下にコードを貼り付けています。フィードバックを聞くことに非常に興味があります。

// please pay attention to library versions, this strategy is only tested with the indicated versions
import React from 'react'; // v0.13.3
import { Provider } from 'react-redux'; // v3.1.0
import { Router, Route, IndexRoute, Link } from 'react-router'; // v1.0.0-rc3
import { createHistory } from 'history'; // v1.12.3
import { createStore } from 'redux'; // v3.0.2

// define some components
class About extends React.Component {
    render () {
        return (
            <div><h1>About</h1></div>
        )
    }
}
class Home extends React.Component {
    render () {
        return (
            <div>
                <h1>Home</h1>
                <Link to="/about">Go to about</Link>
            </div>
        )
    }
}

// create a standard history object
var history = createHistory();

// set up 'route' action and action creator
const ROUTE = 'ROUTE';
function createRouteAction (location) {
    return {
        type: ROUTE,
        payload: location
    };
}

// set up reducer. here we only define behavior for the route action
function reducer (state = {}, action) {
    if (action.type === ROUTE) {
        return Object.assign({}, state, {
            route: action.payload
        });
    }
    else {
        return state;
        // whatever other logic you need
    }
}

// create store
const store = createStore(reducer);

// this factory returns a history implementation which reads the current state
// from the redux store and delegates push state to a different history.
function createStoreHistory () {
    return {
        listen: function (callback) {
            // subscribe to the redux store. when `route` changes, notify the listener
            const unsubscribe = store.subscribe(function () {
                const route = store.getState().route;
                callback(route);
            });

            return unsubscribe;
        },
        createHref: history.createHref,
        pushState: history.pushState
    }
}

React.render(
    <Provider store={store}>
        {() =>
            <Router history={createStoreHistory()}>
                <Route path="/about" component={About} />
                <Route path="/" component={Home} />
            </Router>
        }
    </Provider>,
    document.getElementById('root') // or whatever
);

// when the url changes, dispatch a route action. this is placed at the bottom so that the first route triggers the initial render
const unlisten = history.listen(function (location) {
    store.dispatch(createRouteAction(location));
});

ちなみに、この例は、reduxでreact-routerの使用に苦労していた私のような一部の人々を助け、reduxとreact-routerを今日一緒に使用できるというあなたの主張を明確にするのに役立つと思うので、これについて言及します。

@cappslock私はそれが好きですが、1つ小さなことがあります。 あなたの実装では、ルートの変更はアクションであり、これは「アクションはコマンドではなくイベントである」というアプローチを破り、最終的には厄介な慣行につながる可能性があります。 考え方を逆にしましょう。アクションによって、アドレスバーを変更する副作用（コンポーネントまたは実際のブラウザーのアドレスバーなど）が発生する可能性があり、その副作用によって新しいアクション（ ROUTE_CHANGED ）がディスパッチされる可能性があります。 これは基本的に、API呼び出しをトリガーするのと同じパターンです。

@ tomkis1フィードバックをありがとう。 私があなたを正しく理解していれば、これは実際にはすでにそのように機能しています。 ROUTEアクションは、URL変更の副作用としてディスパッチされます。 たぶんROUTE_CHANGEDの方がいい名前でしょうか？

おー！ 私はちょうどダブルチェックしました、そしてあなたは正しかったです。 ええROUTE_CHANGEDの方が理にかなっています。

私もそう思います。 私は戻ってそれを変更しますが、これらのコメントは本当に混乱するでしょう:)

明確にするために、フローは次のようになります。

URLの変更-> ROUTE （またはROUTE_CHANGED ）アクション->レデューサー更新ストア->ストア履歴（以前にストアにサブスクライブされていた）がリスナーに通知->リアクションルーターの更新

ユーザーが監視するUIの状態を駆動するストア以外は必要ないため、これが好きです。 テストにも適しているようです。

このアプローチの欠点は、 ROUTE_CHANGEDアクションに応答してURLが更新されないことです。 アクションをコマンドとして扱いたくないと言っている場合、これが望ましいかどうかさえわかりませんが、 ROUTE_CHANGEDアクション作成者の副作用として、またはによって完了する可能性があると思います別のストアサブスクライバー。

ところで、この議論がこの問題の範囲を超えている場合は、私に知らせてください、そして私はそれを動かします。

@cappslock私はそれがとても好きです！ ROUTE_CHANGEDをディスパッチしてもルートが変わらないのは間違いないと思います。 アクションをトリガーではなくイベントとして扱うことは、私にはよりクリーンで理解しやすいように見えます（ユーザーの操作に応答するため、 BUTTON_CLICKEDアクションが実際にボタンのクリックをトリガーすることは期待できません）。 私が得られないあなたのコードの一部があります。 このビットについて詳しく説明していただけますか？

これは、最初のルートが最初のレンダリングをトリガーするように下部に配置されます

@elliotdickisonありがとうございます！ それを明確にしようと思いますが、徹底的な分析ではなく、試行錯誤と仮定に基づいているので、私が言っていることを一粒の塩でとってください。 これは、現時点での概念実証/スケッチの証明です。

そのコードをReactRouterのインスタンス化の上に配置したとき、 /ルートに対応するコンポーネントはレンダリングされませんでした。 アクションが手動でディスパッチされた場合、または状態が手動でプッシュされた場合でもルーターは機能するため、履歴のライフサイクルの問題であると考えました。 ReactRouterのインスタンス化の下に移動すると、これが解決しました。 少なくとも1人のサブスクライバーが存在するまで、履歴ライブラリは最初のルートの通知を延期していると思われます。 ReactRouterが設定される前にそのサブスクライバーが設定されている場合、どの通知もそれに到達しません。

これを説明しようとすると、私の理解が少し欠けていることに気づきます。 私はこれをもっと調べて、より良い答えを提供しようとします。

このアプローチの欠点は、ROUTE_CHANGEDアクションに応答してURLが更新されないことです。 アクションをコマンドとして扱いたくないと言っている場合、これが望ましいかどうかさえわかりませんが、ROUTE_CHANGEDアクション作成者の副作用として、または別のストアサブスクライバーによって完了する可能性があると思います。

これは望ましいことだと思います。 ROUTE_CHANGEDは間違いなく外部ソース（onhashchangeなど）によって起動される必要があります。IMOURLを変更すると、 ROUTE_CHANGEDになります。その逆はありません。

同意します。 ディスパッチされたROUTE_CHANGEDアクションが実際の履歴イベントではなくコードから発生した場合に備えて、ストアにサブスクライブし、URLの同期を維持するだけでよいと思いましたが、その場合はプログラミングエラー。

@cappslockあなたのアプローチは本当に良いです。 それについてブログ投稿をお願いします。

@vojtatrantahttps ：//github.com/rackt/redux/issues/805をチェックしてください。実装の背後にあるインスピレーションだったと思います。

@vojtatrantaありがとう！ 私はブログを持っていないので、私が持っているほとんどすべての情報はこのスレッドと＃805にあります。 特に何かもっと情報が欲しいですか？

1.0が出ました。

それは時間です：

• それを使用するためのポートルーティングの例
• real-worldの例に基づいて「UsagewithRouter」レシピを追加します

：clap：

@gaearon _Usage with Router_の例がPRにある場合、この問題を参照できますか？ 私が知っている多くの人々（私自身を含む）は、これら2つがどのようにうまく連携するかについての説明を探しています。

はい、確かに。 これは、問題が解決されるときです。 :-)

たぶん、redux-simple-routerを今すぐ検討する必要がありますか？

redux-simple-router +1

ユニバーサルな例+ react-router（+ redux-simple-router）を変換しました
https://github.com/eriknyk/redux-universal-app

みなさん、こんにちは。この議論の結論は何ですか？ 私は、react-routerで使用するためにドキュメントが更新されていないことを確認しました
cc @gaearon

@gaearonは、reactアプリケーションをreduxにバインドした後、stateを使用してコンポーネントの表示/非表示を制御します。 そのため、RRのような元の「ルーター」の役割は現在私のアプリケーションに適合していないと思います。
「新しいルーター」が行う必要があると思う唯一のことは、URLを状態にマップし（アクションを介して？）、状態をURLに再マップすることです。
アプリケーションコンポーネント（おそらくそれらの一部）の表示方法をurlに決定させると、2つの状態ソースがあります。1つはurlで、もう1つはreduxのストアであり、これにより状況が難しくなります...
これについてどう思いますか？ アドレスバーをアプリケーションの別のコンポーネントにする必要があります。

ありがとう

https://github.com/rackt/react-router-redux/pull/259を出荷した後、このドキュメントを作成することを正式に約束します。 これは、ReactRouterとReduxをバインドするための祝福された方法になります。 ドキュメントでは、最初にそのパッケージなしでそれらを使用する方法を示し、パッケージが提供する2つの便利さを徐々に紹介します。ミドルウェアと信頼できる唯一の情報源のストアへの移動です。 どちらもオプションであるため、どちらの場合にそれらの使用をオプトインするか、およびそれらがバニラRRに対して何を提供するかを必ず説明します。

考慮すべき考えは次のとおりです。ルーティングと履歴に関連するミドルウェアについて説明するものが、http：//rackt.org/redux/docs/advanced/Middleware.html（ http://rackt.org/redux/docs/advanced/Middleware.html （たとえば、最後の例では）

@gaearon React Routerのドキュメント/次のステップの進捗状況は？ 私はReduxのドキュメントを読んでいて、それを愛していますが、それらの偽のリンクに悩まされています:(

私は自分の個人リポジトリでreactルーターのドキュメントを書き直し始めたばかりで、そこにもreduxセクションを設ける予定です。 私はすぐに何かをするかもしれません、私の自由な時間に依存します。 私はあなたを最新の状態に保ちます。 https://github.com/knowbody/react-router-docs

公平を期すために、reactルーターを機能させるためにRedux側には何も必要ありません。 しかし、ええ、これを行う必要があります。

注意：React Router 3.0は、React Redux connect()の最適化でより適切に機能し、新しいwithRouter() HOCは、コンテキストを直接使用する必要がないことを意味します。

https://twitter.com/dan_abramov/status/729768048417251328

@ gaearon 、 @ timdorrは、ルーターインスタンスを引数としてアクション作成者に渡すことと、browserHistoryをアクション作成者に直接インポートすることの間のトレードオフを明確にできます（ここで提案されているようにhttps://github.com/reactjs/react-router/blob /master/docs/guides/NavigatingOutsideOfComponents.md？

router 、履歴インスタンスをいくつかの追加の機能でラップするだけですが、2つのインスタンス間で同じpush ＃$メソッドとreplaceメソッドです。

ありがとう、@ timdorr。

routerが基本的に履歴シングルトン（シングルトンです）をラップするのに、なぜwithRouter()構成が必要なのかという質問になると思います。

コンポーネントと履歴インスタンスの間のより緩い結合を可能にするためですか（つまり、コンポーネントがシングルトンオブジェクトに直接アクセスするのを防ぐため）？ もしそうなら、アクションクリエーターから履歴インスタンスにアクセスするときに同じロジックが適用されませんか？

はい。独自の履歴インスタンスを提供し、独自のシングルトンモジュールを作成したくない（または作成できない）場合（JSモジュールシステムに精通していない場合は混乱する可能性があります）。 あなたがそれを自分でやりたいのなら、あなたは私たちのパターンに従うことを歓迎します。

複数の高次コンポーネントにどのように使用できるかについてwithRouterを文書化する価値があるかどうかはわかりません。 私はまだこれを回避するための最良の方法を見つけようとしています：
connect(mapStateToProps, mapDispatchToProps)(withRouter(withAnalytics(withLanguage(TestForm)))); 。

composeのようなものを使用することもできますか？

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withRouter,
  withAnalytics,
  withLanguage
);

export default enhance(TestForm);

ただし、私のユースケースでは、コンテキストにログインしたユーザー、現在の言語、テーマ情報、および分析が含まれるため、多くのコンテキストと多くの接続されたコンポーネントでこれが困難になります。

もう1つのアイデアは、1つのコンテキスト名前空間の下でwithRouterとconnectロジックを複製することです。 withAppContext() => props.app = { user, lang, theme, analytics, router, connect? } ？

これは、ドキュメントまたはconnectでのwithRouterの使用例に役立ちますか？

@gaearon React Router 3.0.0と新しいEggheadビデオがしばらく公開されており、このスレッドが1年間開かれているので、これに関する更新はありますか？

＃1929で完了