next redux saga

NÄCHSTE-UDUX-SAGA

Dieses Projekt wird nicht mehr gepflegt!

Denn next.js ist massiv und andere Pakete mit besserer Unterstützung gewachsen, haben die redux-saga -SSR-Funktionalität behandelt. Weitere Informationen finden Sie in #79.

redux-saga -hoc für Next.js. Controllierte redux-saga -Ausführung für das Rendering der Serverseite.

Achtung: Synchronous hoc wird seit Version 4.0.0 nicht mehr unterstützt!

Installation

yarn add next-redux-saga

Erste Schritte

Schauen Sie sich das offizielle Beispiel für den nächsten.js an oder klonen Sie dieses Repository und führen Sie das lokale Beispiel aus.

Probieren Sie das lokale Beispiel aus

1. Klonen Sie dieses Repository
2. Abhängigkeiten installieren: yarn
3. Starten Sie das Projekt: yarn start
4. Öffnen Sie http: // localhost: 3000

Verwendung

next-redux-saga verwendet den Redux-Store, der von Next-Redux-Wrapper erstellt wurde. Weitere Informationen finden Sie in der Dokumentation.

Konfigurieren Sie den Store -Wrapper

 import { applyMiddleware , createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { createWrapper } from 'next-redux-wrapper'

import rootReducer from './root-reducer'
import rootSaga from './root-saga'

const makeStore = context => {
  const sagaMiddleware = createSagaMiddleware ( )
  const store = createStore (
    rootReducer ,
    applyMiddleware ( sagaMiddleware ) ,
  )

  store . sagaTask = sagaMiddleware . run ( rootSaga )

  return store
}

const wrapper = createWrapper ( makeStore )

export default wrapper

Konfigurieren Sie die benutzerdefinierte _app.js -Komponente

 import React from 'react'
import App from 'next/app'
import withReduxSaga from 'next-redux-saga'

import wrapper from './store-wrapper'

class ExampleApp extends App {
  static async getInitialProps ( { Component , ctx } ) {
    let pageProps = { }

    if ( Component . getInitialProps ) {
      pageProps = await Component . getInitialProps ( ctx )
    }

    return { pageProps }
  }

  render ( ) {
    const { Component , pageProps } = this . props
    return (
      < Component { ... pageProps } />
    )
  }
}

export default wrapper . withRedux ( withReduxSaga ( ExampleApp ) )

Seitenkomponenten anschließen

 import React , { Component } from 'react'
import { connect } from 'react-redux'

class ExamplePage extends Component {
  static async getInitialProps ( { store } ) {
    store . dispatch ( { type : 'SOME_ASYNC_ACTION_REQUEST' } )
    return { staticData : 'Hello world!' }
  }

  render ( ) {
    return < div > { this . props . staticData } </ div >
  }
}

export default connect ( state => state ) ( ExamplePage ) 

Mitwirkende

Brent Mahlzeithaus Euen ?

Timon Borter Euen ?

Artem Abzanov Euen

Robbin Habermehl Euen

Beitragen

1. Geben Sie dieses Repository in Ihr eigenes Github -Konto und klonen Sie es dann auf Ihr lokales Gerät
2. Installieren Sie die Abhängigkeit: yarn
3. Verknüpfen Sie das Paket mit dem Global Modul Directory: yarn link
4. Führen Sie yarn test --watch und nehmen Sie Ihre Änderungen vor
5. Sie können yarn link next-redux-saga verwenden, um Ihre Änderungen in einem tatsächlichen Projekt zu testen

LIZENZ

Dieses Projekt ist unter den Bedingungen der MIT -Lizenz lizenziert. Weitere Informationen finden Sie in der Lizenzdatei.