Данные не загружаются в пользовательский интерфейс с помощью redux-saga - PullRequest
Новая
       30

Данные не загружаются в пользовательский интерфейс с помощью redux-saga

0 голосов
/ 16 февраля 2020

Когда я вызываю конечную точку API, с моим реагирующим приложением оно не загружает полезную нагрузку в пользовательский интерфейс, но я вижу, что данные загружаются через консоль. Кто-нибудь может помочь мне разобраться в проблеме? Это убивает меня. Я перечисляю мои саги и редукторы здесь.

app. js

/**
 * @format
 * @flow
 */

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

import { store } from './store/store'

import Home from './screens/home/home'

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <Home />
      </Provider>
    )
  }
}

export default App

store. js

import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import createSagaMiddleware from 'redux-saga'

import rootReducer from '../reducers'

import rootSaga from '../sagas'

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  rootReducer,
  applyMiddleware(
    sagaMiddleware,
    createLogger(),
  ),
)

sagaMiddleware.run(rootSaga)

export {
  store,
}

actions. js

export function getTransatcions() {
    return { type: "TRANSACTIONS_REQUESTED" }
}

саг. js

import { takeEvery, call, put } from "redux-saga/effects"

export default function* watcherSaga() {
  yield takeEvery("TRANSACTIONS_REQUESTED", workerSaga)
}

function* workerSaga() {
  try {
    const payload = yield call(getTransatcions)
    yield put({ type: "TRANSACTIONS_LOADED", payload })
  } catch (e) {
    yield put({ type: "TRANSACTIONS_ERRORED", payload: e })
  }
}

function getTransatcions() {
    return fetch("https://jsonplaceholder.typicode.com/posts").then(response => {
        return response.json()
    })
}

редукторы. js

const initialState = {
    isFetching: false,
    transactions: []
}

export default (state = initialState, action) => {
    switch (action.type) {
        case "TRANSACTIONS_REQUESTED":
            return {
                ...state,
                isFetching: true
            }
        case "TRANSACTIONS_LOADED":
            return {
                ...state,
                isFetching: false,
                transactions: action.payload                
            }
        case "TRANSACTIONS_ERRORED":
            return {
                ...state,
                isFetching: false,
                error: action.error
            }
        default:
            return state
    }
}

home. js (UI Screen) 

import React, { Component } from 'react'
import { connect } from "react-redux"
import {
    View,
    Text,
    Button,
    StatusBar,    
    ScrollView,
    SafeAreaView    
} from 'react-native'

import { Header } from 'react-native/Libraries/NewAppScreen'

import { getTransatcions } from '../../actions'

import styles from './styles/home'

class Home extends Component {

    state = {
        transactions: []
    }

    componentWillMount() {
        this.props.getTransatcions()
    }

    render() {
        return (
            <>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                    <ScrollView
                        style={styles.scrollView}
                        contentInsetAdjustmentBehavior="automatic"                
                    >
                        <Header />
                        <View style={styles.body}>      
                            <Text>{this.props.transactions[0].title}</Text>      
                            {this.props.transactions && this.props.transactions.map(each => {
                                <>                                    
                                    <Text>{each.title}</Text>
                                </>
                            })}
                            <Button
                                title="Press me"
                                // onPress={actionCreators.getTransactions}
                            />
                        </View>
                    </ScrollView>
                </SafeAreaView>
            </>  
        )
    }   
}

function mapStateToProps(state) {
    return {
        transactions: state.transactions
    }
}

export default connect(mapStateToProps, { getTransatcions })(Home)

Может кто-нибудь, пожалуйста, помогите мне решить эту проблему. Мне пришлось использовать сагу, и я немного новичок в концепции редукс-саги. Данные просматриваются в пользовательском интерфейсе. Если я скажу это следующим образом. 

this.props.transactions[0].title

Но если я использую для повторения все содержимое пользовательского интерфейса, как это, он не будет отображать данные. 

{this.props.transactions && this.props.transactions.map(each => {
<>                                    
    <Text>{each.title}</Text>
</>
})}

1 Ответ

0 голосов
/ 16 февраля 2020

Вы пропустили return внутри map

{this.props.transactions && this.props.transactions.map(each => {
   return (<>                                    
     <Text>{each.title}</Text>
   </>)
})}
...