React Native 上的 Redux 无法从 reducer 渲染

Question

我是 redux 的新手，这可能是一些愚蠢的错误。我正在尝试在 Action 中进行 Api 调用并将数据传递给 Reducer。我可以看到数据在 reducer 中正确传递 action.data。我认为问题出在组件的 mapStateToProps 中，因此我无法传递状态并呈现组件。请找到以下操作 - 减速器 - store.js - home.js

ACTION.JS

export const DATA_AVAILABLE = 'DATA_AVAILABLE';


export function getData(){
    return (dispatch) => {

        //Make API Call
   
        fetch("MY API URL").then((response) => {
          return response.json();
        }).then((data) => {
                    var data  = data.articles;
                    console.log(data)
                    dispatch({type: DATA_AVAILABLE, data:data});
        })
    };
}

这是Reducers.JS

import { combineReducers } from 'redux';

import { DATA_AVAILABLE } from "../actions/" //Import the actions types constant we defined in our actions

let dataState = {
  data: [],
  loading:true
};

const dataReducer = (state = dataState, action) => {
    switch (action.type) {
        case DATA_AVAILABLE:
        state = Object.assign({}, state, {
              data: [
                ...action.data //update current state data reference
              ],
              loading: false

            });
console.log(action.data);
            return state;
        default:
            return state;
    }
};

// Combine all the reducers
const rootReducer = combineReducers({
    dataReducer
    // ,[ANOTHER REDUCER], [ANOTHER REDUCER] ....
})

export default rootReducer;

这是 Store.js 与 Redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import reducers from '../app/reducers/index'; //Import the reducer

// Connect our store to the reducers
export default createStore(reducers, applyMiddleware(thunk));

最后是 home.js 组件，当我需要传递新状态并渲染它时

'use strict';

import React, { Component } from 'react';
import {
    StyleSheet,
    FlatList,
    View,
    Text,
    ActivityIndicator
} from 'react-native';

import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';

import * as Actions from '../actions'; //Import your actions

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        this.props.getData(); //call our action
    }

    render() {
        if (this.props.loading) {
            return (
                <View style={styles.activityIndicatorContainer}>
                    <ActivityIndicator animating={true}/>
                </View>
            );
        } else {
          console.log(this.state)
            return (
              <View style={styles.row}>
                  <Text style={styles.title}>
                  {this.props.data}
                  fomrmo
                  </Text>
                  <Text style={styles.description}>
                  </Text>
              </View>
            );
        }
    }


};



// The function takes data from the app current state,
// and insert/links it into the props of our component.
// This function makes Redux know that this component needs to be passed a piece of the state
function mapStateToProps(state, props) {

    return {
        loading: state.dataReducer.loading,
        data: state.dataReducer.data
    }

}

// Doing this merges our actions into the component’s props,
// while wrapping them in dispatch() so that they immediately dispatch an Action.
// Just by doing this, we will have access to the actions defined in out actions file (action/home.js)
function mapDispatchToProps(dispatch) {
    return bindActionCreators(Actions, dispatch);
}

//Connect everything
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 1

假设：

    case DATA_AVAILABLE:
      console.log(action.data.length)

将 console.log 超过 0

更改减速器操作：

const dataReducer = (state = dataState, action) => {
    switch (action.type) {
        case DATA_AVAILABLE:
          return {
            ...state,
            data: action.data,
            loading: false    
          });
        default:
            return state;
    }
};

至地址：

Objects are not valid as a React child(found objects with Keys {source, author, title, description, url })

那是因为您尝试渲染对象：

{this.props.data}

但如果你这样做：

{
   this.props.data.map((el, i) => 
     <p key={i}>Element nr {i}</p> 
   )
}

应该可以。

React Native 上的 Redux 无法从 reducer 渲染

Redux on React Native not able to render from reducer

javascript

reactjs

react-native

redux

redux-thunk