Want to use redux to update stae rather than using useState

Question

I am currently trying to learn Redux but I am having trouble managing the state with Redux. Right now I can use useState to manage the state and it works but can't figure it out using Redux. Right now my app is just trying to get a text entered in the input field and when the button is pressed it will add it to the flatlist state.

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);

my textreducer file:

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;
}

my store file:

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

My 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>
  );
}

Answer 1

the problem is you are using Add_Item itself in both mapDispatchToProps and in App, you must rename the Add_Item in mapDispatchToProps and then use it in App:

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 = {addItemAction: Add_Item };
function App({ tasks, addItemAction }) {
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={() => addItemAction(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);

but I recommend you to use hooks instead of connect and it's recommended by the redux team to use redux toolkit.