Redux-Saga组件设置

Question

我很难让redux-saga工作。我认为问题出在saga_component.js和saga_screen.js文件之间的某个地方。可能是我没有使用正确的语法来绘制API？

我的错误是：“未定义的不是一个函数(在'...ConnectData.map‘附近)”。它位于Saga_component.js文件中。

我已经在这方面工作了一段时间，不确定在这一点上应该调整什么。将非常感谢您的一些指导。这是指向repo的链接。所有屏幕和组件都可以在'src‘文件中找到。

App.js文件

import React from "react";
import Setup from "./src/boot/setup";
import { Provider } from 'react-redux';
import store from './src/store';

export default class App extends React.Component {

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

Store.js

import {createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';
import AllReducers from '../src/reducers';
import rootSaga from '../src/saga'; 

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
 AllReducers,
 applyMiddleware(sagaMiddleware));
 sagaMiddleware.run(rootSaga);

 export default store;

saga.js

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

import { REQUEST_API_DATA, receiveApiData } from "./actions";
import { fetchData } from "./api"; 

function* getApiData(action) {
  try {
   // do api call
   const data = yield call(fetchData);
   yield put(receiveApiData(data));
  } catch (e) {
  console.log(e);
 }
}

export default function* rootSaga() {
  yield takeLatest(REQUEST_API_DATA, getApiData);
} 

data.js (这是reducer)

import { RECEIVE_API_DATA } from "../actions";

export default (state = {}, { type, data }) => {
  switch (type) {
    case RECEIVE_API_DATA:
    return data;
    default:
     return state;
       }
     };

actionsCreators.js

 import { REQUEST_API_DATA, RECEIVE_API_DATA} from './types';

 export const requestApiData = () => { 
  return {
 type: REQUEST_API_DATA 
 }
};
export const receiveApiData = (data) => { 
  return {
  type: RECEIVE_API_DATA, 
   data 
 }
};

saga_component.js

import React from "react";
import { AppRegistry, View, StatusBar } from "react-native";
import { Container, Body, Content, Header, Left, Right, Icon, Title, 
Input, Item, Label, Button, Text } from "native-base";


export default class SagaComponent extends React.Component {

renderList() {

const ConnectData = this.props.data; 

return ConnectData.map((data) => {
  return (

  <View  style={{width: 280}}> 
  <Text style={styles.TextLight}><Text style={styles.TextDark}>Dest City:</Text> {data.name}</Text>
  <Text style={styles.TextLight}><Text style={styles.TextDark}>ETA:</Text> {data.email}</Text>
  </View>
  );

})；}

render() {
  return (
  <View>
      <Label>Username</Label>

      {this.renderList()}
  </View>
  );
 }
}

saga_screen.js

import React, { Component } from "react";
import { Container, Text,  Button } from "native-base";
import {  View, StatusBar } from "react-native";
import { connect } from "react-redux";
import styles from "../styles/styles";
import { bindActionCreators } from "redux";
import { requestApiData } from "../actions";

import SagaComponent from '../components/saga_component';

class SagaScreen extends React.Component {


render() {
 return (
    <Container style={styles.container}>        
      <View style={{marginTop: 50 }}>
        <SagaComponent data={this.props.data}/>  
      </View> 

      <Button block style={styles.Home_btns}  
      onPress={() => this.props.navigation.navigate("Home")}> 
        <Text>Home</Text> 
      </Button> 
    </Container>
  );
 }
}

function mapStateToProps(state) {
 return {
  data: state.data,
  };
 }

 const mapDispatchToProps = dispatch =>
 bindActionCreators({ requestApiData }, dispatch);


 export default connect(mapStateToProps, mapDispatchToProps)(SagaScreen);

Api.js

export const fetchData = async () => {
try {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  return data;
} catch (e) {
  console.log(e);
}
}; 

index.js(reducer index.js文件)

import { combineReducers } from 'redux';
import data from "./data";


const AllReducers = combineReducers({

data,  
});

export default AllReducers;  

Answer 1

看起来问题可能出在你的减速器里。您应该使用return { data };而不是返回data

另外，您可能希望防范saga_component (ConnectData || []).map((data) => {中的虚假数据