Redux 数据更新不调度

Question

I have redux data and it's updating even if dispatch is firing, below is my redux state

const initialState = {
    actions: [
        {
            id: 'c943df13-549b-4bf9-838c-4c5da1e9649a',
            userId: 'badd523d-62ea-4763-a955-92a612861495',
            jobId: '5aa44d3d-b925-462b-befb-b7c673c2dfae',
            description: 'Test Description 1',
            timeTaken: 2,
            nonBillable: false,
            status: 0,
            dateCreated: new Date(),
        },
        {
            id: '4dcd6ca4-42dc-4868-bc4b-a08c849f5846',
            userId: 'badd523d-62ea-4763-a955-92a612861495',
            jobId: '5aa44d3d-b925-462b-befb-b7c673c2dfae',
            description: 'Test Description 2',
            timeTaken: 5,
            nonBillable: false,
            status: 0,
            dateCreated: new Date(),
        },
    ],
};

const reducers = (state: any = initialState, action: any) => {
    switch (action.type) {
        default:
            return state;
    }
};

export default reducers;

moving forward, I am fetching this data via useEffect and useSelector and has a filter of a jobId

const reducers = useSelector((state: RootState) => state.reducers);
const [items, setItems] = useState<Array<ActionProps>>([]);

...

useEffect(() => {
        
        const actItems = reducers.actions.filter(
            (item: ActionProps) => item.jobId === jobId
        );

        setItems(actItems);
    }, [jobId, reducers.actions]);

now, since the redux data is now inside of the state I am just updating the nonBilable object inside of it because I need to update the front end as it is clickable via form and here's my function

const onChangeToggle = ({ id, value }: { id: string | number; value: boolean }) => {
        const currentData = [...items];
        const findIndex = currentData.findIndex((item: ActionProps) => item.id === id);
        currentData[findIndex].nonBillable = value;

        setItems(currentData);
    };

As you can see above function, I am not dispatching the update since I have another function to dispatch it. Now, when I try to navigate to another page and go back to the page the state is being saved even if I have a useEffect inside the component and not dispatching.

I have found this Redux state is being updated without dispatching any action question but I think we have a different situation

Any help is appreciated.

Answer 1

Looks like a reference issue, can you try deep cloning the reducer and set it to state like this.

useEffect(() => {

      const clonedReducers = JSON.parse(JSON.stringify(reducers));  
      const actItems = clonedReducers.actions.filter(
            (item: ActionProps) => item.jobId === jobId
        );

        setItems(actItems);
    }, [jobId, reducers.actions]);

Because when you do the below code

currentData[findIndex].nonBillable = value;

The reference of currentData in your state looks like pointing to the same reference in the reducer. So mutating it directly mutates the value in the reducer as well.