2つの異なるコンポーネントで同じredux状態を同時に更新するにはどうすればよいですか？

React Nativeシナリオがあり、1つはatextInputで、もう1つはSVG図面です。に入力してtextInputボタンを押すと、dispatchアクションを使用して、redux状態で格納されている配列にデータインスタンスとしてテキストが挿入されます（これを呼び出しますtextListState）。

//TEXT INPUT COMPONENT
//this code is just for presentation. it will cause errors obviously
const dispatch = useDispatch();
const submitHandler = (enteredText) => {
    dispatch(submitData(enteredText))
};

return(
    <TextInput ...... />
    <TouchableOpacity onPress={() => submitHandler(enteredText) } />
)

これで、SVGコンポーネントはtextListState、関数を使用して保存されているすべての機能の塗りつぶし色を更新します（例setFillColor）。これはuseEffect、依存関係が小道具に設定されたフック内で行われます（例propA）。

ここで問題となるのはtextListState、useEffectから新しく入力したテキストをコンポーネントにtextInput含めるために、依存関係として追加する必要があることですSVG。しかし、そうすることで、setFillColorも更新されるため、無限ループを作成していますtextListState。

//SVG COMPONENT
const [textList, setTextList] = useState([]);
const textListState = useSelector(state => state.textListState);

const dispatch = useDispatch();
const setFillColor= useCallback((id, fill) => {
    dispatch(updateFillColor(id, fill))
}, [dispatch]);

useEffect(() => {
    //INFINITE LOOP BECAUSE textListState  KEEPS UPDATING WITH setFillColor
    const curTextList = [];

    for (const [i, v] of textListState.entries()) {
        setFillColor(5, "white")

        curTextList.push(
            <someSVGComponent />
        )
    }
    setTextList(curTextList);
}, [props.propA, textListState])

return(
    <G>
        {textList.map(x => x)}
    </G>
)

SVG無限ループを作成せずに、新しく挿入されたテキストをコンポーネントに追加できるようにするにはどうすればよいですか？

編集：

リダックスアクション

export const UPDATE_TEXT = "UPDATE_TEXT";
export const SUBMIT_DATA = "SUBMIT_DATA";

export const updateFillColor = (id, fill) => {
    return { type: UPDATE_TEXT, id: id, fill: fill }
};

export const submitData= (text) => {
    return { type: SUBMIT_DATA, text: text }
};

reduxレデューサー

import { TEXT } from "../../data/texts";
import { UPDATE_TEXT } from "../actions/userActions";
import { INSERT_TEXT } from "../actions/userActions";

// Initial state when app launches
const initState = {
    textListState: TEXT
};

const textReducer = (state = initState, action) => {
    switch (action.type) {
        case INSERT_TEXT :
            return {
                ...state,
                textListState: [
                    ...state.textListState,
                    action.text
                ]
            }
        case UPDATE_TEXT :
            const curText = state.textListState.filter(text => text.id === action.id)[0];

            return {
                ...state,
                textListState: [
                    ...state.textListState.slice(0, curIndex), //everything before current text
                    curText.fill = action.fill,
                    ...state.textListState.slice(curIndex + 1), //everything after current text
                ]
            }

        default:
            return state;
    }
};

export default textReducer;