React Native 上的 Redux 无法从 reducer 渲染答案

【问题标题】：Redux on React Native not able to render from reducerReact Native 上的 Redux 无法从 reducer 渲染
【发布时间】：2018-03-25 11:39:39
【问题描述】：

我是 redux 的新手，这可能是一些愚蠢的错误。我正在尝试在 Action 中进行 Api 调用并将数据传递给 Reducer。我可以通过 action.data 在 reducer 中看到正确传递的数据。我认为问题出在组件中的 mapStateToProps 中，因此我无法传递状态并渲染组件。请在下面找到 action - reducers - 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;

这是带有 Redux-thunk 的 Store.js

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);

【问题讨论】：

你的View 被渲染了吗？如果是这样，{this.props.data} 的值是多少？
@Tomasz 视图被渲染并且 {this.props.data} 不渲染任何东西。如果我 console.log(this.props.data) 它说 Array: [] - (empty sorry)
您能否验证var data = data.articles; 不是响应中的空数组？
@Tomasz 我刚刚仔细检查了一下，它正确地返回了包含对象的数组。同样在 reducer.js 中，当我使用 console.log(action.data) 时，我可以看到正确填充了对象的数据。为什么不将其传递给组件是一个谜:)
是普通对象还是数组？

标签： javascript reactjs react-native redux redux-thunk

【解决方案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;
    }
};

到地址：

对象作为 React 子对象无效（找到带有键的对象 {来源、作者、标题、描述、网址})

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

{this.props.data}

但如果你这样做：

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

它应该可以工作。

【讨论】：