Хотите использовать redux для обновления stae, а не использовать useState

В настоящее время я пытаюсь изучить Redux, но у меня возникают проблемы с управлением состоянием с помощью Redux. Прямо сейчас я могу использовать useState для управления состоянием, и оно работает, но не могу понять это с помощью Redux. Прямо сейчас мое приложение просто пытается получить текст, введенный в поле ввода, и при нажатии кнопки оно добавит его в состояние плоского списка.

import { connect } from 'react-redux';
import {View,Text,Button,TextInput,FlatList,ScrollView,} from 'react-native';
import { useState } from 'react';
import { Add_Item } from '../redux/actions/index';

const mapStateToProps = (state) => {
  return { tasks: state.reducer.tasks };
};
const mapDispatchToProps = { Add_Item };
function App({ tasks, Add_Item }) {
const [add, setAdd] = useState('');
return (
<ScrollView>
  <View style = {{paddingTop: 20}}>
    <View style = {{ border: '2px solid green', margin: 10 }}>
      <TextInput
        placeholder = "Enter Value Here"
        onChangeText = {(add) => setAdd(add)}
      />
    </View>
    <View
      style = {{
        padding: 3,
        border: '2px solid green',
        backgroundColor: 'green',
        'border-radius': 15,
        margin: 10,
      }}>
      <Button
        title = "Add Values to Flatlist"
        onPress = {() => Add_Item(add)}
        color = "green"
      />
    </View>

    <FlatList
      data = {tasks}
      renderItem = {({ item }) => (
        <View>
          <Text
            style = {{
              borderBottomColor: 'grey',
              borderBottomWidth: 1,
              padding: 5,
            }}>
            {item.title}
          </Text>
        </View>
      )}
    />
  </View>
</ScrollView>
);
}

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

мой файл textreducer:

import { ADD_ITEM } from '../actionType/index';

var initialState = {
tasks: [],
};
export default function (state = initialState, action) {
 if (action.type == ADD_ITEM) {
  return {...state, 
  tasks: [...state.tasks,{title:action.payload.title}]}
 }

 return state;
}

файл моего магазина:

import { configureStore } from "@reduxjs/toolkit";
import reducer from "../reducers/index";
export default configureStore({reducer});

Мой app.js:

import React, { useState } from 'react';
import { View } from 'react-native';
import {Provider} from 'react-redux';
import store from './redux/store/index';
import AddApp from './FlatListApp/index'
export default function App() {
  return (
   <Provider store = {store}>
    <AddApp/>
   </Provider>
  );
}