🔧 Implementing Redux and Redux-Thunk in a React Native Application

"react-redux": "^9.1.2",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0"

// store/configStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import { thunk } from 'redux-thunk';
import rootReducer from './rootReducer';
import Reactotron from './ReactotronConfig'; // Optional, if you are using Reactotron for debugging

const middleWare = applyMiddleware(thunk);

const store = createStore(
  rootReducer,
  compose(middleWare, Reactotron.createEnhancer()) // Remove Reactotron if not using
);

export default store;

// store/rootReducer.js
import { combineReducers } from 'redux';
import inputValueReducer from './Home/reducer';

const appReducer = combineReducers({
  inputValueReducer,
});

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined;
  }
  return appReducer(state, action);
};

export default rootReducer;

store/
  Home/
    action/
      index.js
    constant/
      index.js
    reducer/
      index.js

// store/Home/action/index.js
import { TEST_NAME } from '../constant';

export const addValue = (text) => ({
  type: TEST_NAME,
  payload: text,
});

// store/Home/constant/index.js
export const TEST_NAME = 'TEST_NAME';

// store/Home/reducer/index.js
import { TEST_NAME } from '../constant';

const initialState = {
  value: '',
};

const inputValueReducer = (state = initialState, action) => {
  switch (action.type) {
    case TEST_NAME:
      return {
        ...state,
        value: action.payload,
      };
    default:
      return state;
  }
};

export default inputValueReducer;

// screens/Home.js
import React, { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { TEST_NAME } from '../../store/Home/constant';

const Home = ({ navigation }) => {
  const [value, setValue] = useState('');
  const text = useSelector((state) => state.inputValueReducer.value);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>
      <Text onPress={() => navigation.navigate('Profile')}>Home</Text>
      <TextInput value={value} onChangeText={(text) => setValue(text)} style={styles.input} />
      <Button
        title='Send'
        onPress={() => {
          dispatch({ type: TEST_NAME, payload: value });
        }}
      />
      <Text>{text}</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderColor: 'gray',
    borderWidth: 1,
    padding: 10,
    marginBottom: 10,
    width: '80%',
  },
});

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/configStore';
import Home from './screens/Home';

const App = () => {
  return (
    <Provider store={store}>
      <Home />
    </Provider>
  );
};

export default App;