ディスプレイ反応ネイティブRedux Saga APIレスポンス

Question

私はReact Nativeで2週間ほど勉強していますが、ReduxとRedux-Sagasで作業しています。私は数日間これを研究しようとしましたが、（考えて）私はそれを掛けていましたが、残念ながら私はまだ苦労しています。ここで私は読んで試みられてきたいくつかのリソースは次のとおりです。

https://shift.infinite.red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de

https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8

私は気象データのためのAPIを照会するアプリケーションを作成するためにIgnite-CLI定型を使用しています。通常のapi.get()機能をapisauceから使用すると、APIリクエストが機能しますが、データを返すRedux Sagaアクションを取得できません。私はコンセプトを十分理解していないと思っています。ここで

は、指定されたパラメータからJSONデータを取得するためにapisauceを使用して、私のApi.jsファイル（これは完璧に動作します）

// a library to wrap and simplify api calls 
import apisauce from 'apisauce' 

// our "constructor" 
const create = (baseURL = 'https://my-api-url.com/api/') => { 

    const apiId = 'xxxxxxx' 
    const apiKey = 'xxxxxxxxxxxxxxxxx' 
    const resortKey = 'xxxxxx' 
    const apiParams = resortKey + '?app_id=' + apiId + '&app_key=' + apiKey 

    const api = apisauce.create({ 
    // base URL is read from the "constructor" 
    baseURL, 
    // here are some default headers 
    headers: { 
     'Cache-Control': 'no-cache' 
    }, 
    // 10 second timeout... 
    timeout: 10000 
    }) 

    const getReport =() => api.get(apiParams) 

    return { 
    getReport, 
    } 
} 

// let's return back our create method as the default. 
export default { 
    create 
} 

のIgnite CLIがあり

/App/Services/Api.jsです自動的に還元アクションとサガを生成する素晴らしいジェネレータです。ここでは、それらの生成されたファイルです：

/App/Redux/SnowReportRedux.js（Reduxのアクション）

import { createReducer, createActions } from 'reduxsauce' 
import Immutable from 'seamless-immutable' 

/* ------------- Types and Action Creators ------------- */ 

const { Types, Creators } = createActions({ 
    snowReportRequest: ['data'], 
    snowReportSuccess: ['payload'], 
    snowReportFailure: null 
}) 

export const SnowReportTypes = Types 
export default Creators 

/* ------------- Initial State ------------- */ 

export const INITIAL_STATE = Immutable({ 
    data: null, 
    fetching: null, 
    payload: null, 
    error: null 
}) 

/* ------------- Reducers ------------- */ 

// request the data from an api 
export const request = (state, { data }) => 
    state.merge({ fetching: true, data, payload: null }) 

// successful api lookup 
export const success = (state, action) => { 
    const { payload } = action 
    return state.merge({ fetching: false, error: null, payload }) 
} 

// Something went wrong somewhere. 
export const failure = state => 
    state.merge({ fetching: false, error: true, payload: null }) 

/* ------------- Hookup Reducers To Types ------------- */ 

export const reducer = createReducer(INITIAL_STATE, { 
    [Types.SNOW_REPORT_REQUEST]: request, 
    [Types.SNOW_REPORT_SUCCESS]: success, 
    [Types.SNOW_REPORT_FAILURE]: failure 
}) 

/App/Sagas/SnowReportSagas.js

import { call, put } from 'redux-saga/effects' 
import SnowReportActions from '../Redux/SnowReportRedux' 

export function * getSnowReport (api, action) { 
    const { data } = action 
    // make the call to the api 
    const response = yield call(api.getReport, data) 

    // success? 
    if (response.ok) { 
    yield put(SnowReportActions.snowReportSuccess(response.data)) 
    } else { 
    yield put(SnowReportActions.snowReportFailure()) 
    } 
} 

はその後、彼らが提供した例に続いて、SnowReportRedux.jsからSnowReportActionsとgetSnowReportという機能をSnowReportSagas.jsからrooに追加しましたトンサーガ機能など：私は混乱してしまうところ今ここ

//...imports & constants 

export default function * root() { 
    yield all([ 
    // some sagas only receive an action 
    takeLatest(StartupTypes.STARTUP, startup), 

    // some sagas receive extra parameters in addition to an action 
    takeLatest(SnowReportTypes.SNOW_REPORT_REQUEST, getSnowReport, api) 
    ]) 
} 

です。コンポーネントや画面内でこれらのディスパッチアクションを実際に呼び出すにはどうすればよいですか？

/App/Containers/ResortReportScreen.js

//.. constructor 

componentDidMount() { 
    this.props.getSnowReport(); 
} 

// .. render()/close component 

const mapDispatchToProps = (dispatch) => { 
    return { 
    getSnowReport:() => dispatch({ type: SnowReportActions.snowReportRequest() }) 
    } 
} 

export default connect(null, mapDispatchToProps)(ResortReportScreen) 

：ここに...私のいずれかの画面から、いくつかの作品をしている私はimport SnowReport Actions from '../Redux/SnowReportReduxとmapDispatchToPropsに持って理解が、私は発射するディスパッチを取得することはできません

componentDidMount()機能が起動するときは、dispatchSnowReportActions.snowReportRequest()の動作が必要ですか？私がconsole.log()を使用してそのアクションの応答を返すときはいつでも、それは発砲することはありません。私はここで間違って何をしていますか？ actionsを使用すると、APIリクエストからデータを表示するにはどうすればよいですか？

私のsagaMiddlewareとreducersは、すべてIgniteによって自動的に生成されます。それらを表示する必要がある場合は、ちょうど尋ねる。

Answer 1

ファンクションSnowReportActions.snowReportRequest()は、ディスパッチするアクションを返すアクションクリエータです。あなたがそのようなあなたのコードを修正することができます：あなたも代わりmapDispatchToProps（https://github.com/reactjs/react-redux/blob/master/docs/api.md）

const mapDispatchToProps = { 
    getSnowReport: SnowReportActions.snowReportRequest 
}