レデューサーで.jsonを使用してFlatListで小道具をレンダリング

Pantelis：

私はそれはそうのような減速に渡されることをJSONファイルを持っています：

import data from './LibraryList.json';

export default () => data;

これは私の減速のすべてのためのindex.jsです。

import { combineReducers } from 'redux';
import LibraryReducer from './LibraryReducer';

export default combineReducers({
    libraries: () => LibraryReducer

});

そして、App.jsファイル

import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header} from './components/common'
import LibraryList from './components/LibraryList';

const App = () => {
    return (
        <Provider store={createStore(reducers)}>
            <View>
                <Header headerText="Tech Stack" />
                <LibraryList />
            </View>
        </Provider>
    )
}

export default App;

これは私が減速への接続や小道具に状態をマッピングするが、残念ながらそれは私のテキストコンポーネントをレンダリングしていない、それも（「ちょっと」）私はconsole.logを印刷しない方法です。

import React, { Component } from 'react';
import { FlatList, Text } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';



class LibraryList extends Component {

    renderItem({library}) {
        console.log("hey");
        return <Text> {library.title}</Text>
    }
    render() {

        return (

            <FlatList
                data={this.props.libraries}
                keyExtractor={library => library.id.toString()}
                renderItem={({item}) => this.renderItem(item)}
            />

        );
    }
}  

const mapStateToProps = state => {

    return { libraries: state.libraries };
} 

export default connect(mapStateToProps)(LibraryList);

私は状態をCONSOLE.LOGすると、これは私が得るすべてです：

ƒ _default() {
    return _LibraryList.default;
  }

代わりに、オブジェクトの私の配列の。

アビシェークゴーシュ：

私はこの問題は、あなたの中にあるかもしれないと思いますcombineReducers。キーはlibraries-機能戻っているLibraryReducer-再び機能を返しています。

帰国してみてくださいLibraryReducerそれを返す関数を使用する代わりに、直接のを。

export default combineReducers({
    libraries: LibraryReducer // no function. LibraryReducer itself is a function
});

EDIT：

私はまた、あなたの減速のための初期状態などのデータを設定試してみることをお勧めします。もう少しコードかもしれませんが、将来的にはあなたが複数のキーを追加したい場合は、はるかにスケーラブルになりますlibraries減速状態。

import librariesData from './LibraryList.json';

const initialState = {
  data: librariesData,
}

export default function librariesReducer(state = initialState, action) {
  return state;
}

コンポーネントでのあなたのセレクタは、わずかに変更されます。

const mapStateToProps = state => ({
  libraries: state.libraries.data,
});

レデューサーで.jsonを使用してFlatListで小道具をレンダリング

おすすめ