react-native/redux - 操作不起作用？

Question

我玩的反應本地/終極版和我派遣一個應該顯示數字又一個錯誤被拋出一個動作：

未處理的異常JS：對象是不是一個陣營的孩子有效（發現： 帶鍵{type，payload}）的對象。如果您打算呈現子集的集合 ，請改爲使用數組，或者使用React附件中的 createFragment（object）封裝對象。檢查Text的渲染方法 。

createStore.js

import { createStore, applyMiddleware, combineReducers } from 'redux'; 
import createLogger from 'redux-logger'; 
import numReducer from './reducers/numReducer'; 

const logger = createLogger(); 

export default (initialState = {}) => (
    createStore(
    combineReducers({ 
     numbers: numReducer 
    }), 
    initialState, 
    applyMiddleware(logger) 
) 
); 

App.js

import React from 'react'; 
import { Provider } from 'react-redux'; 
import HomeScreen from './components/HomeScreen'; 
import createStore from './createStore'; 

const store = createStore(); 

export default() => (
    <Provider store={store}> 
    <HomeScreen /> 
    </Provider> 
); 

numReducer.js

import { LIST_NUMBERS, PICK_NUMBER } from '../actions/actionTypes'; 

export default (state = [], action = {}) => { 
    switch (action.type) { 
    case LIST_NUMBERS: 
     return action.payload || []; 
    case PICK_NUMBER: 
     return action.payload; 
    default: 
     return state; 
    } 
}; 

HomeScreen.js

import React from 'react'; 
import { View } from 'react-native'; 
import NavContainer from '../containers/NavContainer'; 


const HomeScreen =() => (
    <View> 
    <NavContainer /> 
    </View> 
); 

export default HomeScreen; 

NavContainer.js

import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import { listNumbers, pickNumber } from '../actions/numberActions'; 

import Nav from '../components/Nav'; 

const mapStateToProps = state => ({ 
    numbers: state.numbers 
}); 

const mapDispatchToProps = dispatch => (
    bindActionCreators({ 
    listNumbers, 
    pickNumber 
    }, dispatch) 
); 

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

Nav.js

import React, { Component, PropTypes } from 'react'; 
import { View, Text } from 'react-native'; 


export default class Nav extends Component { 

    render() { 
    return (
     <View> 
     <Text>FirstLine</Text> 
     <Text>SecondLind</Text> 
     <Text>Number: {this.props.pickNumber(3)}</Text> 
     </View> 
    ); 
    } 

} 

請指教一下我做錯了。謝謝

Answer 1

您需要從一個生命週期方法或某個處理程序中調度您的動作，然後使用組件中的redux存儲庫中的（更新）道具。

例子：

import React, { Component, PropTypes } from 'react'; 
import { View, Text } from 'react-native'; 


export default class Nav extends Component { 
    componentDidMount() { 
    this.props.pickNumber(3); 
    } 
    render() { 
    return (
     <View> 
     <Text>FirstLine</Text> 
     <Text>SecondLind</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     </View> 
    ); 
    } 

}