javascript - 在Reducer中使用.json渲染FlatList中的prop

Question

我有一个 json 文件，它在 reducer 中传递，如下所示:

import data from './LibraryList.json';

export default () => data;

这是我所有 reducer 的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;

这就是我连接到reducer并将状态映射到props的方式，但不幸的是它没有渲染我的文本组件，它甚至没有打印我的console.log(“hey”)。

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

而不是我的对象数组。

Answer 1

我认为问题可能出在您的combineReducers中。关键的libraries正在返回一个函数 - LibraryReducer -它再次返回一个函数。

尝试直接返回LibraryReducer，而不是使用返回它的函数。

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

编辑:

我还建议您尝试将数据设置为您的 reducer 的初始状态。代码可能会稍微多一些，但如果将来您想向libraries reducer 状态添加更多键，那么可扩展性会更高。

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