大家好，我是一个使用React Native和Redux的新手，虽然我觉得我几乎要把我的头缠在Redux的核心概念上，但我试图把它应用到这个应用程序中，但却一直迷路。我还没有有效地合并平面列表，因为我的MapDispatchToProps在视觉上做了我想要的事情，即当按下添加到列表按钮时，显示下面用户的输入。
问题
1）我不明白为什么我在文本输入中添加内容时会出现NaN？
我已经尝试了两天，现在看视频和阅读文档
2nd）关于如何更改我的代码，以便当用户输入一个值时，它通过平面列表显示在下面，有什么建议吗？
真的试图理解我不理解的东西，所以任何一点都很好。
我的任务列表组件

import {
  Text,
  View,
  Button,
  StyleSheet,
  TextInput,
  SafeAreaView,
  FlatList,
} from 'react-native';
import {
  newToDo,
  addToList,
  removeFromList,
  reset,
} from '../redux/actions/index';

const TaskList = ({ todo, history, addToList, removeFromList, reset }) => {
  return (
    <View>
      <SafeAreaView>
        <TextInput
          style={styles.input}
          value={todo}
          placeholder="Enter Value Here"
        />
        <View style={styles.button}>
          <Button
            title="Add Values to List"
            onPress={() => addToList({ todo })}
          />
        </View>
        <View style={styles.button}>
          <Button
            title="RemoveFromList"
            onPress={() => removeFromList({ todo })}
          />
        </View>
        <View style={styles.button}>
          <Button title="Reset" onPress={() => reset()} />
        </View>

        {history.map((x) => (
          <Text
            style={{
              borderWidth: 1,
              borderColor: 'gray',
              borderRadius: 5,
              margin: 10,
              padding: 5,
            }}>
            {x}
          </Text>
        ))}
        <FlatList
          data={newToDo}
          renderItem={newToDo}
          keyExtractor={(item) => item.toDo}
        />
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  input: {
    padding: 5,
    textAlign: 'center',
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderColor: 'gray',
    borderStyle: 'solid',
    borderRadius: StyleSheet.hairlineWidth * 10,
    marginTop: StyleSheet.hairlineWidth * 20,
    marginBottom: StyleSheet.hairlineWidth * 20,
  },
  button: {
    margin: 5,
  },
});

const MapDispatchToProps = { addToList, removeFromList, reset };
const MapStateToProps = (store) => ({
  list: store.listReducer.newToDo,
  history: store.listReducer.history,
});
export default connect(MapStateToProps, MapDispatchToProps)(TaskList);

redux文件夹操作

import {ADD_TO_LIST, REMOVE_FROM_LIST, RESET_LIST} from '../actionTypes/index';

export const addToList = (newToDo) => {
  return {
    type: ADD_TO_LIST,
    payload: {
      toDo: 'newToDo',
    },
  };
};

export const removeFromList = (newToDo) => {
  return {
    type: REMOVE_FROM_LIST,
    payload: {
      toDo: 'newToDo',
    },
  };
};
export const reset = () => {
  return {
    type: RESET_LIST,
    payload: {

    },
  };
};

我的列表Reducer

ADD_TO_LIST,
  REMOVE_FROM_LIST,
  RESET_LIST,
} from '../actionTypes/index';

const initialState = {
  history: [],
  list:[],
};
export default function (state = initialState, action) {
  if (action.type == ADD_TO_LIST) {
    return {
      ...state,
      list: state.list - action.payload.toDo,
      history: [...state.history, + action.payload.toDo],
    };
  } else if (action.type == REMOVE_FROM_LIST) {
    return {
      ...state,
      list: state.list - action.payload.toDo,
      history: [...state.history, - action.payload.toDo],
    };
  } else if (action.type == RESET_LIST) {
    return { ...state, list: 0, history: [] };
  }
  return state;
}

我的主应用程序

import TaskList from './TaskList/index';
import store from './redux/store';

export default function App() {
  return (
    <Provider store={store}>
    <TaskList />
    </Provider>
  )
}

Full project available on expo snacks https://snack.expo.dev/@stephaniebrandon/excited-juice-box