Redux: Dokumen: Penggunaan dengan React Router

Saya awalnya menulis contoh rendering sisi server untuk menggunakan router reaksi dalam konteks universal. Disarankan agar penggunaan dengan react router dapat menjadi dokumen tersendiri. Mungkin kita bisa menambahkan bagian ke dokumentasi?

Juga, bagaimana perasaan Anda tentang menambahkan contoh yang menunjukkan router reaksi digunakan secara universal?

Saya pikir memodifikasi contoh real-world menjadi universal akan menjadi ide yang bagus. Dengan begitu Anda tidak perlu membangun apa pun dari awal.

Jika Anda ingin beralih dari pembuat tindakan, berikan instance router sebagai parameter ke pembuat tindakan

Hanya ingin mengklarifikasi, ini hanya berfungsi di 0.13 karena 1.0beta tidak memiliki konsep createRouter (belum?), benar?

Anda dapat melakukannya dengan 1.0.0-beta3 dari dalam komponen React Anda.

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

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

@timdorr Apakah aman menggunakan this.context ? Saya mendapat kesan bahwa itu tidak dimaksudkan untuk digunakan secara eksternal.

Ya, itu hanya tidak berdokumen, bukan tidak aman. Itu sedikit berubah di 0,14, tetapi tidak dengan cara yang akan merusak ini. Saya membayangkan itu akan didokumentasikan di beberapa titik segera.

@timdorr Apakah itu juga berarti mungkin untuk bertransisi ke url yang berbeda dari pembuat tindakan di 1.0.0-beta3 ?

Ya, jika Anda meneruskan instance router ke pembuat tindakan, Anda dapat melakukan apa pun yang Anda inginkan dengannya, termasuk transisi.

Saya menggabungkan ini:

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`.

Apa yang mungkin salah?

PS: RR 1.0.0-beta3

@gyzerok Pastikan Anda membungkus seluruh () => <Router>stuff</Router> menjadi <Provider> , seperti contoh real-world melakukannya.

@gaearon ya, tentu saja. Saya membungkusnya bukan di Penyedia tetapi dalam komponen saya sendiri yang sebagian besar adalah salin-tempel Penyedia Anda. Perbedaannya adalah saya tidak memberikan store ke dalamnya, tetapi membuat store di dalamnya.

@gyzerok Sulit untuk mengatakan apa yang salah tanpa melihat kodenya. (Dan tolong ajukan masalah terpisah, react-redux repo adalah tempat yang bagus.)

Thx untuk contoh real-wolrd ! Tapi bagaimana menghadapi AsyncProps ? Sepertinya manipulasi konteks ganda tidak akan berhasil.

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

dan 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); 

Ini akan berfungsi tanpa pembungkus connect , tetapi tidak akan ada redux juga. Apakah ada yang menghadapi masalah ini?

Atau mungkin ada cara lain untuk menjeda navigasi hingga data dimuat?

Statis hanyalah statika. Anda dapat menempatkannya pada apa saja, termasuk hasil 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 maaf, contoh tidak lengkap. Saya mencoba memperpanjang hasil connect dengan alat peraga statis yang hilang, tetapi masalah nyata dengan konteks. Beri saya waktu, saya akan mendorong seluruh contoh ke dalam repo terpisah

Hal lain yang sedang saya selidiki adalah menyimpan params di toko redux dengan cara yang jelas dan tidak mencolok. Setelah mencoba beberapa pendekatan, saya akhirnya menulis:

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

jadi mungkin untuk merujuk ke params dari penyeleksi, seperti di bawah ini:

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

Ini mungkin akan berubah setelah react-redux-router lebih stabil dirilis.

Kabar baik: React Router 1.0 RC sekarang memperlihatkan hook yang kita butuhkan.
Lihat https://github.com/acdlite/redux-react-router dan beri tahu kami apakah Anda menyukainya sekarang!

@gaearon saya menemukan masalah dengan react-router dan eksperimental AsyncProps . Memperbarui reaksi memecahkan masalah

@wtfil Senang mengetahuinya!

Saat berintegrasi dengan react-router, saya mengerti dari utas ini bahwa kita dapat meneruskan instance router ke pembuat tindakan dan memanggil metode di atasnya. Namun, saya juga memahami bahwa pembuat aksi dimaksudkan untuk tidak memiliki efek samping dalam bentuknya yang paling murni. Satu-satunya kasus yang saya lihat di mana pembuat tindakan diizinkan untuk memiliki efek samping adalah ketika mereka adalah tindakan asinkron yang ditangani oleh middleware. Apakah harapan kemudian bahwa pembuat tindakan yang melakukan transisi harus asinkron, bukan fungsi murni?

Apakah harapan kemudian bahwa pembuat tindakan yang melakukan transisi harus asinkron, bukan fungsi murni?

Pembuat aksi diperbolehkan memiliki efek samping. Sebaiknya hindari mereka jika memungkinkan, tetapi tentu saja pada titik tertentu Anda membutuhkannya, dan karena reduksi murni di Redux, dan kami tidak memiliki mekanisme efek eksplisit seperti di Elm (lihat #569 untuk diskusi), pembuat tindakan adalah tempat untuk menempatkan mereka.

Lihat redux-router . Ini bekerja di atas React Router, tetapi memungkinkan Anda mengirimkan tindakan dan menangani sinkronisasi router.

menunggu React Router dan Redux Router keduanya mencapai 1.0...

Ya. Kami akan menambahkan resep setelah ini terjadi.

Jadi saya telah mengikuti diskusi ini dan juga berpikir sedikit tentang bagaimana perutean cocok dengan redux secara umum (lihat https://github.com/rackt/redux/issues/805). Berdasarkan beberapa diskusi di utas itu dan beberapa percobaan, saya telah menemukan pendekatan yang saya pribadi lebih suka lem react-router/react-redux-router.

Pada dasarnya, saya mencoba untuk tidak memberikan react-router atau redux pengetahuan satu sama lain dan sebaliknya menghubungkannya melalui implementasi riwayat khusus. Dengan pendekatan ini, perutean ditangani seperti ini:

1. Tindakan, peredam, dan kunci di toko dibuat untuk route .
2. Implementasi riwayat standar (contoh ini menggunakan createHistory yang disukai tetapi Anda dapat dengan mudah menggunakan createHashHistory atau apa pun) dibuat dan didengarkan. Ketika lokasi saat ini di browser diubah, tindakan ROUTE dikirim, yang pada akhirnya menempatkan lokasi ke toko.
3. Instance router reaksi standar dibuat dengan implementasi riwayat kustom kedua yang memberi tahu pelanggan (router reaksi) ketika kunci route dari penyimpanan diubah. Itu juga mendefinisikan createHref dan pushState , mendelegasikan keduanya ke riwayat standar yang dibuat pada langkah 2.

Itu dia. Saya pikir ini memberikan pemisahan tugas yang cukup bersih antara redux dan router reaksi dan menghilangkan kebutuhan untuk menarik perpustakaan "lem" lain. Saya menempelkan kode saya di bawah ini, saya akan sangat tertarik untuk mendengar umpan balik:

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

Omong-omong, saya menyebutkan ini, karena saya pikir contoh ini mungkin membantu beberapa orang seperti saya yang berjuang dengan penggunaan react-router dengan redux dan membantu memperjelas pernyataan Anda bahwa redux dan react-router dapat digunakan bersama hari ini.

@cappslock Saya menyukainya, ada satu hal kecil. Dalam implementasi Anda, mengubah rute adalah tindakan, ini agak merusak pendekatan "Aksi adalah acara bukan perintah" yang pada akhirnya dapat menyebabkan beberapa praktik buruk. Mari kita membalikkan pemikiran, kemungkinan tindakan apa pun dapat menghasilkan efek samping yang mengubah bilah alamat (baik itu komponen atau bilah alamat browser nyata....) dan efek sampingnya menghasilkan pengiriman tindakan baru ( ROUTE_CHANGED ). Ini pada dasarnya pola yang sama seperti memicu panggilan API.

@tomkis1 terima kasih atas umpan baliknya. Jika saya memahami Anda dengan benar, ini sebenarnya sudah berfungsi seperti itu. Tindakan ROUTE dikirim sebagai efek samping dari perubahan URL. Mungkin ROUTE_CHANGED akan menjadi nama yang lebih baik?

Oh! Saya baru saja memeriksa ulang dan Anda benar. Ya ROUTE_CHANGED akan lebih masuk akal.

Aku pikir juga begitu. Saya akan kembali dan mengubahnya tetapi kemudian komentar ini akan sangat membingungkan :)

Alurnya seperti ini, untuk memperjelas:

Perubahan URL -> tindakan ROUTE (atau ROUTE_CHANGED ) -> toko pembaruan peredam -> riwayat toko (sebelumnya berlangganan toko) memberi tahu pendengar -> pembaruan router reaksi

Saya lebih suka ini karena saya tidak menginginkan apa pun selain toko yang mendorong status UI yang diamati pengguna. Tampaknya juga lebih disukai untuk pengujian.

Kelemahan dari pendekatan ini adalah bahwa URL tidak diperbarui sebagai tanggapan atas tindakan ROUTE_CHANGED . Saya bahkan tidak yakin apakah ini diinginkan jika kami mengatakan kami tidak ingin tindakan diperlakukan sebagai perintah, tetapi saya membayangkan itu dapat diselesaikan baik sebagai efek samping dari pembuat tindakan ROUTE_CHANGED atau dengan pelanggan toko terpisah.

BTW, jika diskusi ini di luar cakupan masalah ini, beri tahu saya dan saya akan memindahkannya.

@cappslock Saya sangat menyukainya! Saya benar-benar tidak berpikir itu masalah bahwa pengiriman ROUTE_CHANGED tidak mengubah rute. Memperlakukan tindakan sebagai peristiwa dan bukan pemicu tampaknya lebih bersih/lebih dapat dimengerti oleh saya (karena tindakan tersebut menanggapi interaksi pengguna; Anda tidak akan mengharapkan tindakan BUTTON_CLICKED untuk benar-benar memicu klik pada tombol). Ada satu bagian dari kode Anda yang tidak saya mengerti. Bisakah Anda menguraikan sedikit ini untuk saya?

ini ditempatkan di bagian bawah sehingga rute pertama memicu render awal

@elliotdickison Terima kasih! Saya akan mencoba mengklarifikasi itu, tetapi tolong ambil apa yang saya katakan dengan sebutir garam karena ini didasarkan pada coba-coba dan asumsi daripada analisis mendalam. Ini lebih merupakan bukti konsep/sketsa pada saat ini.

Ketika saya telah menempatkan kode itu di atas instantiasi ReactRouter , komponen yang sesuai dengan rute / tidak dirender. Router masih akan berfungsi jika tindakan dikirim secara manual atau status didorong secara manual, jadi saya pikir itu adalah masalah siklus hidup dengan riwayat. Memindahkannya di bawah instantiasi ReactRouter menyelesaikan ini. Saya menduga bahwa perpustakaan sejarah menunda pemberitahuan rute awal sampai setidaknya ada satu pelanggan. Jika pelanggan itu diatur sebelum ReactRouter, tidak ada pemberitahuan yang mencapainya.

Mencoba menjelaskan ini, saya menyadari pemahaman saya agak kurang; Saya akan melihat ini lebih banyak dan mencoba memberikan jawaban yang lebih baik.

Kelemahan dari pendekatan ini adalah bahwa URL tidak diperbarui sebagai tanggapan terhadap tindakan ROUTE_CHANGED. Saya bahkan tidak yakin apakah ini diinginkan jika kami mengatakan kami tidak ingin tindakan diperlakukan sebagai perintah, tetapi saya membayangkan itu dapat diselesaikan baik sebagai efek samping dari pembuat tindakan ROUTE_CHANGED atau oleh pelanggan toko yang terpisah.

Saya akan mengatakan ini diinginkan, ROUTE_CHANGED pasti harus dipecat oleh sumber eksternal (misalnya onhashchange...) Perubahan URL IMO harus menghasilkan ROUTE_CHANGED bukan sebaliknya.

Saya agak setuju. Saya pikir mungkin menyenangkan untuk memiliki sesuatu yang berlangganan ke toko dan menjaga URL tetap sinkron jika tindakan ROUTE_CHANGED yang dikirim berasal dari kode dan bukan peristiwa riwayat yang sebenarnya, tetapi Anda dapat berargumen bahwa kasus itu mewakili kesalahan pemrograman.

@cappslock pendekatan Anda sangat bagus. Bisakah Anda membuat beberapa posting blog tentang itu?

@vojtatranta Lihat saja https://github.com/rackt/redux/issues/805 Saya kira itu adalah inspirasi di balik implementasinya.

@vojtatranta Terima kasih! Saya tidak punya blog, jadi hampir semua informasi yang saya miliki ada di utas ini dan #805. Adakah hal khusus yang Anda ingin informasi lebih lanjut?

1.0 keluar.

Ini waktu untuk:

• Contoh Port Routing untuk menggunakannya
• Tambahkan resep “Penggunaan dengan Router” berdasarkan contoh real-world

:tepuk:

@gaearon dapatkah Anda merujuk masalah ini ketika contoh _Penggunaan dengan Router_ dalam PR? Banyak orang yang saya kenal (termasuk saya sendiri) mencari klarifikasi tentang bagaimana keduanya bermain bersama dengan baik.

Ya tentu. Ini adalah saat masalah akan ditutup. :-)

Mungkin redux-simple-router harus dipertimbangkan sekarang?

redux-simple-router +1

Saya baru saja mengonversi contoh universal + react-router (+redux-simple-router)
https://github.com/eriknyk/redux-universal-app

hai semua, apa kesimpulan dari diskusi ini? saya melihat dokumen tidak diperbarui untuk penggunaan dengan react-router
cc @gaearon

@gaearon setelah saya mengikat aplikasi reaksi saya ke redux, saya hanya menggunakan status untuk mengontrol tampilan/tersembunyi komponen saya. Jadi saya tidak berpikir peran "router" asli seperti RR cocok untuk aplikasi saya sekarang.
Satu-satunya hal yang saya pikir perlu dilakukan oleh "router baru" adalah memetakan url ke status (melalui tindakan?) Dan memetakan kembali status kembali ke url juga.
Jika kita membiarkan url memutuskan bagaimana komponen aplikasi (mungkin beberapa di antaranya) ditampilkan, itu berarti kita memiliki dua sumber status, satu adalah url, yang lain adalah toko redux, yang akan membuat segalanya lebih sulit...
Apa yang Anda katakan tentang ini? haruskah kita membiarkan bilah alamat menjadi komponen lain dari aplikasi kita.

Terima kasih

Saya secara resmi berkomitmen untuk menulis dokumen ini setelah kami mengirimkan https://github.com/rackt/react-router-redux/pull/259. Ini akan menjadi cara yang diberkati untuk mengikat React Router dan Redux. Dalam dokumen, pertama-tama kami akan menunjukkan cara menggunakannya tanpa paket itu, dan secara bertahap memperkenalkan dua kemudahan yang diberikan paket: middleware dan memindahkan sumber perutean kebenaran ke dalam toko. Keduanya opsional jadi kami akan memastikan untuk menjelaskan dalam hal apa Anda ingin memilih untuk menggunakannya, dan apa yang mereka berikan kepada Anda daripada vanilla RR.

Berikut adalah pemikiran untuk dipertimbangkan: jika ada yang Anda jelaskan tentang middleware yang terkait dengan perutean dan riwayat juga bisa menjadi bagian spesifik dari aplikasi realistis dalam penjelasan umum http://rackt.org/redux/docs/advanced/Middleware.html ( misalnya, dalam contoh di akhir)

@gaearon ada kemajuan pada dokumen React Router / langkah selanjutnya? Saya membaca dokumentasi Redux dan menyukainya, tetapi kecewa dengan tautan palsu itu :(

Saya baru saja mulai menulis ulang dokumen router reaksi di repo pribadi saya dan saya berencana untuk memiliki bagian redux di sana juga. Saya mungkin memiliki sesuatu yang dilakukan segera, tergantung pada waktu luang saya. Aku akan terus memberitahumu. https://github.com/knowbody/react-router-docs

Agar adil, Anda tidak memerlukan apa pun di sisi Redux agar router reaksi berfungsi. Tapi ya kita perlu melakukan ini.

Perhatian: React Router 3.0 akan bekerja lebih baik dengan optimasi React Redux connect() , dan withRouter() HOC baru berarti Anda tidak perlu menggunakan konteks secara langsung.

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

@gaearon , @timdorr dapatkah Anda mengklarifikasi pertukaran antara meneruskan instance router sebagai argumen ke pembuat tindakan dan langsung mengimpor browserHistory di pembuat tindakan (seperti yang disarankan di sini https://github.com/reactjs/react-router/blob /master/docs/guides/NavigatingOutsideOfComponents.md?

router hanya membungkus instance riwayat Anda dengan beberapa barang tambahan di dalamnya, tetapi metode push dan replace yang sama di antara kedua instance.

Terima kasih @timdorr.

Saya kira pertanyaannya kemudian menjadi mengapa kita membutuhkan komposisi withRouter() jika router pada dasarnya membungkus singleton history (itu singleton, kan)?

Apakah untuk memungkinkan sambungan yang lebih longgar antara komponen dan instance riwayat (yaitu untuk mencegah komponen mengakses secara langsung objek tunggal)? Jika demikian, bukankah logika yang sama akan berlaku saat mengakses instance histori dari pembuat tindakan?

Ya, dan jika Anda memberikan contoh riwayat Anda sendiri dan tidak ingin (atau tidak bisa) membuat modul tunggal Anda sendiri (yang dapat membingungkan jika Anda tidak terlalu familier dengan sistem modul JS). Jika Anda ingin melakukannya sendiri, Anda dipersilakan untuk mengikuti pola kami.

Saya tidak yakin apakah akan berguna untuk mendokumentasikan withRouter tentang bagaimana itu dapat digunakan untuk beberapa komponen tingkat tinggi. Saya masih mencoba mencari cara terbaik untuk menghindari ini:
connect(mapStateToProps, mapDispatchToProps)(withRouter(withAnalytics(withLanguage(TestForm)))); .

Saya juga bisa menggunakan sesuatu seperti compose ?

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

export default enhance(TestForm);

Namun, kasus penggunaan saya, konteksnya akan memasukkan pengguna, bahasa saat ini, informasi tema, dan analitik yang membuat ini menantang dengan banyak konteks dan banyak komponen yang terhubung.

Ide lain adalah untuk menduplikasi withRouter dan connect logika di bawah satu konteks namespace: withAppContext() => props.app = { user, lang, theme, analytics, router, connect? } ?

Apakah ini bermanfaat untuk dokumentasi atau contoh penggunaan withRouter dengan connect ?

@gaearon apakah ada pembaruan untuk ini sekarang karena React Router 3.0.0 dan video Egghead baru Anda telah keluar untuk sementara waktu, dan utas ini telah dibuka selama setahun?

Selesai di #1929