JS / React - 返回函数而不是数组

Question

我试图返回一个数组（GET_NUMBERS动作）但是reducer似乎正在返回一个函数。它可能甚至与React / Redux无关，只是javascript错误。我只想要＆＃39;数字＆＃39;返回10个元素的数组。如果＆＃39;洗牌＆＃39;是一个数组，我正在返回＆＃39; shuffled＆＃39;，为什么动作返回一个函数？请指教。非常感谢你提前。

import { createStore } from 'redux';

const genArray = () => {
  let numbers = new Array(10);
  const shuffled = [];

  numbers = numbers.fill(1).map((_, i) => i + 1);

  while (numbers.length) {
    const idx = numbers.length * Math.random() | 0;
    shuffled.push(numbers[idx]);
    numbers.splice(idx, 1);
  }
  return shuffled;
};

const numbers = genArray();
console.log(numbers);
console.log(typeof numbers);

const initialState = {
  count: 0,
  numbers
};

const countReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    case 'ZERO':
      return {
        count: 0
      };
    case 'POWER':
      return {
        count: Math.pow(state.count, 2)
      };
    case 'GET_NUMBERS':
      return {
        numbers: state.numbers
      };
    default:
      return state;
  }
};

export default createStore(countReducer);

编辑：补充：

我认为它返回一个函数的原因是，在我的容器中，我唯一一次没有不匹配的警告就是当我使用一个＆＃39; func＆＃39;数字：

Counter.propTypes = {
  count: PropTypes.number,
  numbers: PropTypes.func,
  increment: PropTypes.func,
  decrement: PropTypes.func,
  zero: PropTypes.func,
  power: PropTypes.func
};

我尝试过做PropTypes.array，但我得到了：

  

警告：道具类型失败：numbers类型的道具function无效   提供给Counter，预计array。

index.ios.js

import React from 'react';
import {
  AppRegistry
} from 'react-native';
import { Provider, connect } from 'react-redux';

import store from './src/store';
import Counter from './src/Counter';
import * as actions from './src/actions';

// map the state k
const mapStateToProps = state => ({
  count: state.count,
  numbers: state.numbers
});

const CounterContainer = connect(mapStateToProps, actions)(Counter);

const Countly = () => (
  <Provider store={store}>
    <CounterContainer />
  </Provider>
);

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

actions.js

export const increment = () => {
  const action = {
    type: 'INCREMENT'
  };
  return action;
};

export const decrement = () => {
  const action = {
    type: 'DECREMENT'
  };
  return action;
};

export const zero = () => {
  const action = {
    type: 'ZERO'
  };
  return action;
};

export const power = () => {
  const action = {
    type: 'POWER'
  };
  return action;
};

export const numbers = () => {
  const action = {
    type: 'GET_NUMBERS'
  };
  return action;
};

Counter.js

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

export default class Counter extends React.Component {

  renderNumbers() {
    console.log(this.props.numbers);
    return (
      <Text>{this.props.numbers}</Text>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.appName}>
          Countly
        </Text>
        <Text style={styles.tally}>
          Tally: {this.props.count}
        </Text>
        <Text style={styles.tally}>
          Numbers: {this.renderNumbers()}
        </Text>
        <TouchableOpacity onPress={this.props.increment} style={styles.button}>
          <Text style={styles.buttonText}>
            +
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.decrement} style={styles.button}>
          <Text style={styles.buttonText}>
            -
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.power} style={styles.button}>
          <Text style={styles.buttonText}>
            pow
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.zero} style={styles.button}>
          <Text style={styles.buttonText}>
            0
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Counter.propTypes = {
  count: PropTypes.number,
  numbers: PropTypes.func,
  increment: PropTypes.func,
  decrement: PropTypes.func,
  zero: PropTypes.func,
  power: PropTypes.func
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  appName: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  tally: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 20,
    fontSize: 25
  },
  button: {
    backgroundColor: 'blue',
    width: 100,
    marginBottom: 20,
    padding: 20
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 20
  }
});