next redux saga

Next-Redux-Saga

このプロジェクトはもはや維持されていません！

next.jsが大成長しており、より良いサポートを備えた他のパッケージがredux-saga SSR機能をカバーしているためです。詳細については、＃79を参照してください。

next.jsのredux-saga Hocサーバーサイドレンダリング用の制御されたredux-saga実行。

注意：バージョン4.0.0以降、同期HOCはサポートされなくなりました！

インストール

yarn add next-redux-saga

はじめる

公式next.jsの例をチェックしたり、このリポジトリをクローンして、ローカルの例を実行したりします。

ローカルの例を試してください

1. このリポジトリをクローンします
2. 依存関係をインストール： yarn
3. プロジェクトを開始： yarn start
4. http：// localhost：3000を開きます

使用法

next-redux-saga Next-Redux-Wrapperが作成したReduxストアを使用しています。詳細については、ドキュメントを参照してください。

ストアラッパーを構成します

 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

カスタム_app.jsコンポーネントを構成します

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

ページコンポーネントを接続します

 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 ) 

貢献者

ブレントミールハウス ショ和？

ティモン・ボーター ショ和？

Artem Abzanov ショ和

ロビン・ハーバーメル ショ和

貢献

1. このリポジトリを独自のGitHubアカウントにフォークしてから、ローカルデバイスにクローンします
2. 依存関係を取り付けます： yarn
3. パッケージをグローバルモジュールディレクトリにリンク： yarn link
4. yarn test --watchて変更を開始します
5. yarn link next-redux-sagaを使用して、実際のプロジェクトで変更をテストできます

ライセンス

このプロジェクトは、MITライセンスの条件に基づいてライセンスされています。詳細については、ライセンスファイルを参照してください。