Обновление данных Redux без отправки

У меня есть данные redux, и они обновляются, даже если отправка запускается, ниже мое состояние 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 обновляется без отправки каких-либо действий вопрос но я думаю, что у нас другая ситуация

Любая помощь приветствуется.


reactjs javascript redux react-redux react-hooks
person jersrej    schedule 03.06.2021    source источник
comment
Ах, извините за этот @ Turing85, я, должно быть, пропустил это, в любом случае тег javascript все равно исправлен.   -  person jersrej    schedule 03.06.2021
comment
Теперь, когда я пытаюсь перейти на другую страницу и вернуться на страницу, состояние сохраняется, даже если у меня есть useEffect внутри компонента, а не диспетчеризация. - не могли бы вы объяснить это поподробнее? . То есть вы говорите, что все еще видите старые данные в штате?   -  person Shyam    schedule 03.06.2021
comment
Привет, @shyam, не совсем уверен. Если я получу это, но, например, страница 1 - это домашняя страница, страница 2 - это страница с этими кодами, nonBillable = false на redux, а затем я обновил nonBillable до true без отправки, он не должен обновлять redux, но когда я перехожу на страницу 1, а затем снова на страницу 2, nonBillable обновляется до true, даже если у меня есть useEffect.   -  person jersrej    schedule 03.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Похоже на справочную проблему, можете ли вы попробовать глубокое клонирование редуктора и установить его в такое состояние.

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 в вашем состоянии выглядит как указатель на ту же ссылку в редукторе. Таким образом, его изменение напрямую изменяет значение в редукторе.

person Shyam    schedule 03.06.2021