React-Native + Redux：オブジェクトの配列としてAPIからデータを取得し、リストコンポーネントでレンダリングする

Question

私はReact-Native + Reduxを学んでいましたが、比較的小さなアプリケーションを構築しようとしている間に、私の問題は、axiosを使ってapi（別のアプリケーションから）からjsonデータを取得すると、データがオブジェクトの配列（すべてのドアオブジェクトなど）の形で提供されることです。私は私の減速を通じて、私のコンポーネントにその配列を転送しようとするたびに、毎回データが失われると、配列は空のターンアップ

redux-thunkを使用して私の行動の作成者、：

export const doorsFetch =() => { 
    return (dispatch) => { 
    axios.get('http://localhost:3000/api/v1/doors') 
     .then(response => { 
     dispatch({ type: FETCH_DOORS_SUCCESS, payload: response.data }); 
     }) 
     .catch(error => console.log(error.response.data)); 
    }; 
}; 

マイDoorsReducer：

const INITIAL_STATE = []; 

export default (state = INITIAL_STATE, action) => { 
    console.log(action.payload); 
    switch (action.type) { 
    case FETCH_DOORS_SUCCESS: 
     return [...state, action.payload]; 
    default: 
     return state; 
    } 
}; 

action.payload console.logは、この[{オブジェクト}、{オブジェクト}]のような配列を期待しています。しかし、私のコンポーネントでは配列が空になるので、問題は減速機にあると思います。成分小道具に空の配列の同じ結果に

const INITIAL_STATE = { 
    doors: [] 
}; 
export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case FETCH_DOORS_SUCCESS: 
     return { ...state, doors: action.payload }; 
    default: 
     return state; 
    } 
}; 

：

IはまたdoorReducerにこの方法を試してみました。

import { combineReducers } from 'redux'; 
import OrientationReducer from './OrientationReducer'; 
import TraitsReducer from './TraitsReducer'; 
import DoorsReducer from './DoorsReducer'; 

export default combineReducers({ 
    orientation: OrientationReducer, 
    traits: TraitsReducer, 
    doorState: DoorsReducer 
}); 

そして最後に、私のコンポーネント、DoorList：

はここに私の減速指標である

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ListView } from 'react-native'; 
import { doorsFetch } from '../actions'; 
import ListItem from './ListItem'; 

class DoorList extends Component { 

    componentWillMount() { 
    this.props.doorsFetch(); 

    this.createDataSource(this.props); 
    } 

    componentWillReceiveProps(nextProps) { 
    this.createDataSource(nextProps); 
    } 

    createDataSource({ doors }) { 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 

    this.dataSource = ds.cloneWithRows(doors); 
    } 

    renderRow(door) { 
    return <ListItem door={door} />; 
    } 

    render() { 
    console.log(this.props); // for testing 

    return (
     <ListView 
     enableEmptySections 
     dataSource={this.dataSource} 
     renderRow={this.renderRow} 
     /> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    return { 
    doors: state.doorState 
    }; 
}; 

export default connect(mapStateToProps, { doorsFetch })(DoorList); 

私はthis.propsアウトコンソール、私は空になり、ドアの配列を持つオブジェクトを取得します。私はデータに何が起こったのか、それをビューで正しくレンダリングする方法を理解できないようです。どんな洞察も高く評価されるだろう。要求された場合、喜んでより多くのコード/情報を提供します。

編集：私はデバッグ目的のために、私はconsole.logステートメントを置く場所

明確にするため

、これは次のとおりです。

const INITIAL_STATE = []; 

export default (state = INITIAL_STATE, action) => { 
    console.log(action.payload); 
    console.log(action.type); 
    switch (action.type) { 
    case FETCH_DOORS_SUCCESS: 
     console.log('fetching doors case triggered'); 
     return [...state, ...action.payload]; 
    default: 
     console.log('not working!'); 
     return state; 
    } 
}; 

SOLUTION：以下の提案の修正の上に

、他私のFETCH_DOORS_SUCCESS定数が別のファイルから不適切にインポートされたため、レデューサーファイルで定義されていませんでした。したがって、私のswitch文はそれを受け取っておらず、デフォルトの場合に行きました。 FETCH_DOORS_SUCCESSの周りに中括弧がありませんでした。

Answer 1

action.payloadが配列である場合、あなたはまた、適切stateの配列とそれを組み合わせて、その上に拡散オペレータを配置する必要があります。

変更：

case FETCH_DOORS_SUCCESS: 
    return [...state, action.payload]; 

へ：

case FETCH_DOORS_SUCCESS: 
    return [...state, ...action.payload]; 

また、あなたは斧からの約束を返さないようです。（）を取得：

変更この：

return (dispatch) => { 
    axios.get('http://localhost:3000/api/v1/doors') 

return (dispatch) => { 
    return axios.get('http://localhost:3000/api/v1/doors') 

に