如何在React組件裝入之前製作Saga watch事件？

如果我將瀏覽器網址：/uni-classi-virtuali/gestisci/1如何在React組件裝入之前製作Saga watch事件？

組件DettaglioClasseVirtuale（其中我有獲取資源的調用）的功能componentWillMount的rootSaga開始前被調用。

有沒有一種標準的方法讓saga在應用程序啓動時獲取資源？

這是我用來獲取資源「classivirtualiuni」的項目傳奇守望者：

export function* watchGetClasseVirtualiUni() { 
    yield takeEvery(GET_CLASSE.REQUEST, getClasseVirtualiUni) 
} 

export function* getClasseVirtualiUni(action) { 
    try { 
     const data = yield call(fetchResource, `classivirtualiuni/${action.id}`) 
     if (data.success) { 
      yield put(getClasse.success(data.content)) 
     } else { 
      yield put(getClasse.failure(data.message)) 
     } 
    } catch (error) { 
     yield put(getClasse.failure(error.message)) 
    } 
}

通過簡單的rootsaga叫：

export default function* rootSaga() { 
    yield [ 
     // ... 
     // ... 
     watchGetClasseVirtualiUni() 
    ] 
}

這是我的App類的反應，路由器處理：

class App extends Component { 

    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path={'/uni-classi-virtuali'} component={Main} > 
        <IndexRedirect to={'/uni-classi-virtuali/gestisci'} /> 
        <Route path={'crea'} component={CreateClasseVirtualeUni} /> 
        <Route path={'gestisci'} component={ClasseVirtualeList} > 
         <Route path={':id'} component={DettaglioClasseVirtuale} /> 
        </Route> 
        <Route path={'iscriviti'} component={IscrivitiClasseVirtuale} /> 
       </Route> 
      </Router> 
     ) 
    } 
}

這是調用提取數據的組件：

class DettaglioClasseVirtuale extends Component { 

    componentWillMount() { 
     // dispatch the GET_CLASSE.REQUEST action 
     this.fetchClasseVirtuale(this.props.classeId) 
    } 

    // ... 
}

這是應用程序的核心：

function configureStore(initialState) { 
    const sagaMiddleware = createSagaMiddleware() 
    let finalCreateStore = applyMiddleware(thunk, sagaMiddleware)(createStore) 
    const store = finalCreateStore(reducer, initialState); 
    store.runSaga = sagaMiddleware.run 
    store.close =() => store.dispatch(END) 
    return store; 
} 

const store = configureStore() 
store.runSaga(rootSaga) 

ReactDOM.render(
    <div> 
     <Provider store={store}> 
      <App /> 
     </Provider> 
    </div>, 
    document.getElementById('virtual-class') 
)

來源

2016-11-11 Federico Bellucci

我發現了一個乾淨而簡單的解決方法：在rootSaga中準備好一個動作，並在Main組件中等待它。

export default function* rootSaga() { 
    yield [ 
     // ... 
     // ... 
     watchGetClasseVirtualiUni(), 
     put(ready()) 
    ] 
}

class App extends Component { 

    render() { 
     return (
      <Loader isLoaded={this.props.ready}> 
       <Router history={browserHistory}> 
        <Route path={'/uni-classi-virtuali'} component={Main} > 
        {//...} 
        </Route> 
       </Router> 
      </Loader> 
     ) 
    } 
}

來源

2016-11-21 17:25:31

您可以添加getClasseVirtualiUni您rootSaga運行在應用程序啓動而不是通過watchGetClasseVirtualiUni聽行動。剩下的唯一問題是弄清楚如何傳遞通過組件的classeId。

來源

2016-11-11 18:35:52

感謝拉米。我爲另一個不需要參數的頁面使用了這種解決方法。即使我找到了傳遞參數classeId的方法，它仍然是一種解決方法。我對找到一個實際的解決方案感興趣 –

如何在React組件裝入之前製作Saga watch事件？

回答

相關問題