Question

reducers.js

这是我的initialState

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.VirtualKeyboard 2.4
import QtQuick.VirtualKeyboard.Settings 2.2
import QtQuick.Layouts 1.3

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.centerIn: parent
        Layout.alignment: Qt.AlignHCenter
        Button {
            text: "Click on Me"
            onClicked: {
                id_dialog.open()
            }
        }
        TextField {  }
    }

    Dialog {
        anchors.centerIn: parent
        id: id_dialog
        title: "the title"
        ColumnLayout {
            Text {
                text: "Following is a text field"
            }
            TextField {
            }
        }
        standardButtons: Dialog.Ok | Dialog.Cancel
        closePolicy: Dialog.NoAutoClose
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        Component.onCompleted: VirtualKeyboardSettings.fullScreenMode = true;

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

这是我的切换逻辑

const initialState = {
  transfusions: [],
};

我在后端成功更新了，但是如何更新前端。我尝试了这种方法，但是它总是需要刷新页面才能向我显示更新的数据。

Answer 1

transfusions: state.transfusions.map(依赖旧状态，因此总是落后一步

您可以将代码修改为如下形式：

   const transfusionExists = state.transfusions.find(t => t.id === action.payload.id)
   if(!transfusionExists) state.transfusions.push(action.payload)
   return {
        ...state
        ),
      };

Answer 2

最后，我解决了我的问题。我使用了这段代码：

 case UPDATE_TRANSFUSION:
      const transfusionsExisted = state.transfusions.filter(
        (transfusion) => transfusion.id !== action.payload.id
      );
      return {
        transfusions: [action.payload, ...transfusionsExisted],
      };

我先删除了要更新的记录，然后推送了新记录。

如果您正因为这个问题而受苦，希望它对您有帮助。

如何在Redux Reducer中更新状态？

2 个答案: