Как изменить состояние в несколько шагов с помощью приставки

Question

Я хочу создать простое приложение todo. В этом приложении у нас есть два экрана home экран и Completed Works экран

Когда пользователь вводит название незавершенных работ через textInput, они добавляются в список на домашней странице (компонент FlatList и touchableOpacity), когда пользователь щелкает элемент на домашней странице, он должен исчезнуть с домашней страницы и перейти на экран Completed Works.

Я могу сделать первый шаг (Добавление элементов на главную страницу) и удалите их по одному, нажав кнопку), но проблема в том, что элементы не будут отображаться на экране Completed Works.

Как я могу это исправить?

Это это файл действия:

import {
    ADDTEXT,
    REMOVETEXT,
    COMPLETETEXT
} from './types';

export const addText = (item) => {
    return {
        type: ADDTEXT,
        payload: item
    }
}

export const removeText = (index) => {
    return {
        type: REMOVETEXT,
        payload: index
    }
}

export const compltetedText = (item) => {
    return {
        type: COMPLETETEXT,
        payload: item
    }
}

Это файл редуктора:

import {
    ADDTEXT,
    REMOVETEXT,
    COMPLETETEXT
} from '../actions/types';

const initialState = {
    text: [],
}

let id = 0

export const inputReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADDTEXT:
            return {...state, text: state.text.concat({
                    id: id++,
                    text: action.payload,
                    completed: false
                })
            }
            break;
        case COMPLETETEXT:
            return {...state, text: state.text.filter((item) => {
                    item.id!==action.payload.id ,
                    return item.completed !== action.payload.completed

                })
            }
            break;
        case REMOVETEXT:
            return {
                ...state,
                text: state.text.filter((item) => {

                    return item.id !== action.payload.id
                })
            }
            break;
        default:
            return state;
    }
}

А это коды домашнего экрана:

const dispatch = useDispatch();
let [inputValue, setinputValue] = useState('');
const inputData = useSelector(state => state.inputR.text);

return(
   <FlatList
    data={inputData}
    keyExtractor={(item, index) => index}
    renderItem={({ item, index }) => {
    return (
      <TouchableOpacity
       style={styles.button}  
       onPress={() => 
          dispatch(compltetedText(item));
       }>
          <Text>{item.id}</Text>
          <Text>{item.text}</Text>
      </TouchableOpacity>
    )}}
  />)

А это completedworks коды экрана:

import { useDispatch, useSelector } from 'react-redux';
import {  removeText } from '../actions';

const CompletedWorks = (props) => { 
  const newItem = useSelector(state => state.inputR.text);
  const dispatch = useDispatch();
  return ( 
    <FlatList
     data={newItem}
     keyExtractor={(item, index) => index}
     renderItem={({ item, index }) => {
        return (
          (item.completed == true)
           ?
           <TouchableOpacity onPress={() => dispatch(removeText(item))}>
               <Text>{item.id}</Text>
               <Text>{item.text}</Text>
           </TouchableOpacity>
           : null

           )}}
       />)
}