Redux 数据更新不分派答案

【问题标题】：Redux data updating without dispatchingRedux 数据更新不分派
【发布时间】：2021-08-21 10:07:00
【问题描述】：

我有 redux 数据，即使 dispatch 正在触发，它也在更新，下面是我的 redux 状态

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;

继续前进，我正在通过 useEffect 和 useSelector 获取这些数据，并且有一个 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]);

现在，由于 redux 数据现在在状态中，我只是在更新其中的 nonBilable 对象，因为我需要更新前端，因为它可以通过表单点击，这是我的函数

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

正如您在上面的函数中看到的，我没有调度更新，因为我有另一个函数来调度它。现在，当我尝试导航到另一个页面并返回该页面时，即使我在组件内部有一个 useEffect 并且没有调度，也会保存状态。

我发现了这个Redux state is being updated without dispatching any action 问题，但我认为我们的情况不同

感谢任何帮助。

【问题讨论】：

啊，抱歉 @Turing85 我一定错过了，无论如何，javascript 标签是固定的。
现在，当我尝试导航到另一个页面并返回该页面时，即使我在组件中有一个 useEffect 并且没有调度，状态也会被保存。 - 你能解释更多吗？ .所以你是说你仍然看到状态中的旧数据？
嗨@shyam不太确定如果我明白了，但例如第 1 页是主页，第 2 页是具有此代码的页面，redux 上的 nonBillable = false 然后我将 nonBillable 更新为 true没有调度，它不应该更新redux数据，但是当我转到第1页然后再次转到第2页时，即使我有useEffect，nonBillable也会更新为true。

标签： javascript reactjs redux react-redux react-hooks

【解决方案1】：

看起来像一个参考问题，你可以尝试深度克隆reducer并将其设置为这样的状态。

useEffect(() => {

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

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

因为当您执行以下代码时

currentData[findIndex].nonBillable = value;

currentData 在您的状态下的引用看起来像指向 reducer 中的相同引用。所以直接改变它也会改变reducer中的值。

【讨论】：