Redux React Native - 操作未将数据传递给减速器

Question

我是 Redux 的新手，这可能是一些愚蠢的错误。我正在尝试在 Action 中进行 Api 调用并将数据传递给减速器。我可以看到来自 api 调用的响应，但由于某种原因，它没有与 reducer 正确共享数据，或者我不知道如何将状态正确传递和呈现给 home.js。请在下面找到 action - reducers - store.js - home.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});
        })
    };
}

减速器

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, loading:false });
            console.log(dataState)
            return state;
        default:
            return state;
    }
};

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

export default rootReducer;

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 = {
        };

        this.renderItem = this.renderItem.bind(this);
    }

    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={{flex:1, backgroundColor: '#F5F5F5', paddingTop:20}}>
                    <FlatList
                        ref='listRef'
                        data={this.props.data}
                        renderItem={this.renderItem}
                        keyExtractor={(item, index) => index}/>
                </View>
            );
        }
    }

    renderItem({item, index}) {
        return (
            <View style={styles.row}>
                <Text style={styles.title}>
                {this.props.data.title}
                </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.date
    }
}

// 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

您并没有正确地改变状态。 Redux 只进行浅层比较以进行优化。

它唯一的检查参考。 参考需要更新。

state = Object.assign({}, state, {
      data: [
        ...state.data, //change previous state data reference
        ...action.data //update current state data reference
      ],
      loading: false
    });