React Native - 使用Redux将项添加到FlatList

我正在尝试使用Redux实现一个简单的ToDo列表练习应用程序 .

我有 TextInput ， Button 和 FlatList ，这些项目作为数组存储在 store 中，并由 reducer 处理 . 按下按钮时，应将包含输入文本的项目添加到列表中 .

目前当我按下按钮没有任何反应时，列表似乎没有渲染，并且没有添加新元素 . 我怀疑onPress处理可能有问题，但我不确定，我本可以在其他地方犯错，我是React Native的新手

任何帮助解决这个问题都是值得欢迎的 .

到目前为止这是我的代码（没有导入）：

行动

export const addItem = item =>({type: ADD_ITEM, payload: item});

减速器

const initialState = {
    items: [],
};

const itemReducer = (state = initialState, action) => {
    switch(action.type) {
        case ADD_ITEM:
            return { ...state, items: [...state.items, action.payload] };
        default: 
            return state;
    }

};

export default itemReducer;

商店

const store = createStore(itemReducer);

export default store;

输入表格

const mapDispatchToProps = dispatch => {
    return {
        addItem: item => dispatch(addItem(item))
    };
};

class ItemInput extends Component {
    constructor(props) {
        super(props);
        this.state = { itemText: 'Add an item' };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        //event.preventDefault();
        const { itemText } = this.state;
        this.props.addItem( { itemText } );
        this.setState({ itemText: "" });
    }

    render() {
        return (
            <View>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(itemText) => this.setState({itemText})}
                    value={this.state.itemText}
                />
                <Button
                    onPress={this.handleSubmit}
                    title="Submit"
                    color="#841584"
                />
        </View>
        );
    }
}

export default ItemInput = connect(null, mapDispatchToProps)(ItemInput);

名单

const mapStateToProps = state => {
    return { items: state.items };
  };

class ItemList extends Component {

    constructor(props) {
        super(props);

        this.state = {
        };

        this.renderItem = this.renderItem.bind(this);
        this.keyExtractor = this.keyExtractor.bind(this);
    }

    render() {
        return (
            <View style={{flex:1, backgroundColor: '#F5F5F5', paddingTop:20}}>
            <FlatList
                ref='listRef'
                data={this.props.items}
                renderItem={this.renderItem}
                keyExtractor={this.keyExtractor}/>
            </View>
        );
    }

    keyExtractor = (item, index) => index.toString();

    renderItem({item, index}) {
        return (
            <View style={{backgroundColor: 'white'}}>
                <Text>{item.title}</Text>
            </View>
        )
    }
}

export default List = connect(mapStateToProps)(ItemList);

待办事项列表组件

class ToDoList extends Component {
    render() {
        return (
            <View>
                <ItemInput/>
                <List/>
            </View>
        );
    }
}

export default ToDoList;

应用（根）

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ToDoList/>
      </Provider>
    );
  }
}