Визуализируйте опору в FlatList, используя. json в Редукторе - PullRequest
Новая
       0

Визуализируйте опору в FlatList, используя. json в Редукторе

3 голосов
/ 19 февраля 2020

У меня есть файл json, который передается в редукторе следующим образом: 

import data from './LibraryList.json';

export default () => data;

это индекс. js для всех моих редукторов. 

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

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

});

и приложение. 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);

Когда я сохраняю консоль log.log, это все, что я получаю: 

ƒ _default() {
    return _LibraryList.default;
  }

вместо моего массива объектов.

1 Ответ

1 голос
/ 22 февраля 2020

Я думаю, что проблема может быть в вашем combineReducers. Клавиша libraries возвращает функцию - LibraryReducer - которая снова возвращает функцию.

Попробуйте вернуть LibraryReducer напрямую вместо использования функции, которая его возвращает. 

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

РЕДАКТИРОВАТЬ:

Я также рекомендую вам попробовать установить данные в качестве исходного состояния для вашего редуктора. Может быть немного больше кода, но будет гораздо более масштабируемым, если в будущем вы захотите добавить больше ключей к состоянию 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,
});
...