数据未通过 redux-saga 加载到 UI

Question

With my react-native application when I call the API endpoint it is not loading the payload to the UI but I can see that the data is being loaded through the console. Can anybody please help me to sort the issue? This is killing me. I am listing my sagas and reducers here.

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" }
}

sagas.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()
    })
}

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

Can somebody please help me to fix this issue. I had to use saga and i am bit new to redux-saga concepts. Data is being viewed in the UI If I put it like this.

this.props.transactions[0].title

But If I use to repeat all content in the UI like this it won't show the data.

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

Answer 1

You missed return inside map

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