React Native ListView无法在Redux中正确呈现

Question

我一直试图弄清楚为什么我的Listviews没有在React Native Redux中渲染。该应用程序是一个甲板管理系统。甲板上有一组与之相关的扑克牌。现在我只想在添加卡片之前自己渲染甲板。

deckActions.js

import { actionTypes } from '../constants/actions';

let dId=0;

export function addDeck(deckTitle){
    return {
        type: actionTypes.ADD_NEW_DECK,
        payload:{
            deckId: "deck-" + dId++,
            deckTitle
    }
};

deckReducer.js

import { actionTypes } from 'constants/actions';
import { combineReducers } from 'redux';


function addDeckEntry(state, action){
    const {payload} = action;
    const {deckId, deckTitle} = payload;
    const deck = {id: deckId, title: deckTitle};

    return {
        ...state,
        [deckId]: deck
    };
}

function addDeckByID(state, action){
    const{payload} = action;
    const {deckId} = payload;

    return state.concat(deckId);
}

function decksByID(state={}, action){
    switch(action.type){
        case actionTypes.ADD_NEW_DECK:
            return addDeckEntry(state, action);
        default:
            return state;
    };
}

function getAllDecks(state=[], action){
    switch(action.type){
        case actionTypes.ADD_NEW_DECK:
            return addDeckByID(state, action);
        default:
            return state;
    }
}

const decksReducer = combineReducers({
    byID: decksByID,
    allIDs:getAllDecks,
});

export default decksReducer;

store.js

import { createStore, combineReducers } from 'redux';
import cardsReducer from 'reducers/cardReducer';
import decksReducer from 'reducers/deckReducer';
import devToolsEnhancer from 'remote-redux-devtools';

const rootReducer = combineReducers({
    decks: decksReducer
});

export default function configureStore(){
    let store = createStore(rootReducer, devToolsEnhancer());
    return store;
}

Root.js

import React, { Component } from 'react';
import {
  Alert,
  View,
  Text,
  ListView,
  StyleSheet,
} from 'react-native';
import { Button, FormInput } from 'react-native-elements';
import { addDeck } from 'actions/deckActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

export class Root extends Component{
    constructor(props){
        super(props);
        let dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        }); 

        this.state={
            deckName: '',
            dataSource: dataSource,
        };

        this.onAddDeck = this.onAddDeck.bind(this);
        this.addDeck = addDeck
    }


    componentWillReceiveProps(nextProps) {
        if (nextProps.decks.byID !== this.props.decks.byID){
            let data = this._getListViewData(nextProps.decks);
            //alert(nextProps.decks.byID.length);       
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(data)
            });
        }
    }

    _getListViewData(decks){
        let datas = [];

        datas = decks.map((deck) => {
            return deck;
        });
        alert(datas.length);
        return datas;
    }

    _setDeckName(name){
        this.setState({deckName: name});
    }

    onAddDeck(){
        this.props.addDeck(this.state.deckName);
    }

    _renderRow(rowData){
        return(
            <View style={styles.listItem}>
                <Text>{rowData.deckTitle}</Text>
            </View>
        );
    }

    render(){
        return(
            <View style={styles.container}>
                <View>
                    <FormInput 
                        placeholder={"Card Topic"}
                        inputStyle={styles.input}
                        onChangeText={(value) => this._setDeckName(value)}
                    />
                    <Button
                        small
                        raised 
                        onPress={this.onAddDeck}
                        buttonStyle={styles.btnStyle}
                        containerViewStyle={styles.btnStyle}
                        title={"SUBMIT"}
                    />
                </View>
                <ListView 
                    style={{marginTop: 25}}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => this._renderRow(rowData)}
                />
            </View>
        );
    }
}

Root.propTypes = {
    addDeck : React.PropTypes.func.isRequired,
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: 'rgba(0,20,90,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    btnStyle:{
        backgroundColor: 'rgb(0, 100, 255)',
        borderRadius: 10,
    },

    input:{
        color: '#fff',
        fontSize:30,
    },

    listItem:{
        flexDirection: 'row',
    },

});

function mapStateToProps(state){
    return{
        decks: state.decks,
    };
}

function mapDispatchToProps(dispatch){

    return {
        addDeck: (decktitle) => {dispatch(addDeck(decktitle))},
    };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Root);

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';
import Root from './containers/screenOne';
import { Provider } from 'react-redux';
import configureStore from './redux/store/store';

const mainstore = configureStore();

export default class TestApp extends Component {
  render() {
    return (
        <Provider store={mainstore}>
          <Root />
        </Provider>
    );
  }
}

AppRegistry.registerComponent('TestApp', () => TestApp);

可能有人帮忙吗？ Tnanks。