next redux saga

Next-redux-saga

โครงการนี้ไม่ได้รับการดูแลอีกต่อไป!

เพราะ next.js ได้เติบโตอย่างหนาแน่นและแพ็คเกจอื่น ๆ ที่มีการสนับสนุนที่ดีกว่าได้ครอบคลุมฟังก์ชันการทำงานของ redux-saga SSR ดู #79 สำหรับข้อมูลเพิ่มเติม

redux-saga hoc สำหรับ next.js ควบคุมการดำเนินการ redux-saga สำหรับการแสดงผลด้านเซิร์ฟเวอร์

ความสนใจ: ไม่รองรับ Synchronous Hoc อีกต่อไปตั้งแต่เวอร์ชัน 4.0.0!

การติดตั้ง

yarn add next-redux-saga

เริ่มต้น

ตรวจสอบตัวอย่างอย่างเป็นทางการ next.js หรือโคลนที่เก็บนี้และเรียกใช้ตัวอย่างท้องถิ่น

ลองตัวอย่างท้องถิ่น

1. โคลนที่เก็บนี้
2. ติดตั้งการพึ่งพา: yarn
3. เริ่มโครงการ: yarn start
4. เปิด http: // localhost: 3000

การใช้งาน

next-redux-saga ใช้ Redux Store ที่สร้างขึ้นโดย Next-Redux-Wrapper โปรดดูเอกสารของพวกเขาสำหรับข้อมูลเพิ่มเติม

กำหนดค่า 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

กำหนดค่าส่วนประกอบ _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 ) 

ผู้มีส่วนร่วม

Brent Mealhouse -

Timon Borter -

Artem Abzanov

Robbin Habermehl

การบริจาค

1. แยกที่เก็บนี้ไปยังบัญชี GitHub ของคุณเองแล้วโคลนไปยังอุปกรณ์ในพื้นที่ของคุณ
2. ติดตั้ง edpendecies: yarn
3. เชื่อมโยงแพ็คเกจไปยังไดเรกทอรีโมดูลส่วนกลาง: yarn link
4. เรียกใช้ yarn test --watch และเริ่มทำการเปลี่ยนแปลงของคุณ
5. คุณสามารถใช้ yarn link next-redux-saga เพื่อทดสอบการเปลี่ยนแปลงของคุณในโครงการจริง

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ข้อกำหนดของใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม