Javascript 在不触发分派的情况下更新状态道具（）-React Redux

我有一个模式，其中包含一个触发HTTP请求的按钮，此时显示的html将根据服务器的成功/错误响应而改变，响应将改变在

mapstatestrops

函数中处理的状态属性

现在的问题是，我想在关闭模式时将其重置为其初始状态预请求。 我以前是通过使用本地组件状态来实现这一点的，但后来更新了功能，以使用上面所示的请求映射状态道具

我很好奇是否可以在不向随机URI发送调度的情况下重置状态

组件.jsx

const mapStatesToProps = ({myState}) => ({
    response: myState.response,
    success: !!(myState.success),
    fail: !!(myState.fail)
});

const mapDispatchToProps = dispatch => ({
    doReq: () => {
        dispatch(doMyRequest());
    }
});

class MyComponent extends Component {
    toggleModal = () => // modal toggle code

    render() {
        const {response, success, fail} = this.props;

        <div className="myModal">
            // Modal stuff here
            {!success && !fail && (
                <button onClick="() => toggleModal()">Close modal</button>
            )}
            {success && !fail && (
                <h1>Some success message</h1>
            )}
            {!success && fail && (
                <h1>Some fail message</h1>
            )}
        </div>
    }
}

req reducer.js

export const MY_REQUEST;
export const MY_REQUEST_SUCCESS;
export const MY_REQUEST_ERROR;

export const doMyRequest = () => ({
    type: MY_REQUEST,
    agent: agent.req.doRequest
})

import { deepEqual, deepClone } from '../McUtils';
import {
    MY_REQUEST,
    MY_REQUEST_ERROR,
    MY_REQUEST_SUCCESS
} from "../actions/req-actions";

export default (state = {}, action) => {
    let newState = deepClone(state);

    switch (action.type) {
        case MY_REQUEST:
            console.log('SENDING REQUEST');
            newState.response = null;
            newState.success = false;
            newState.fail = false;
            break;

        case MY_REQUEST_SUCCESS:
            console.log('SUCCESS');
            newState.response = action.payload;
            newState.success = true;
            newState.fail = false;
            break;

        case MY_REQUEST_ERROR:
            console.log('FAIL');
            newState.response = action.payload;
            newState.success = false;
            newState.fail = true;
            break;

        default:
            return state;
    }

    return newState;
}

---

只需使用另一个操作：

案例我的请求\u重置：
返回{}//仅将{}放在这里，因为这是您根据减速器定义的初始状态。

个人偏好是这样清楚地定义你的初始状态

constinitialstate={}；
导出默认值（状态=初始状态，操作）=>{
开关（动作类型）{
…您现有的处理程序
案例我的\u请求\u重置：
返回初始状态
}
}

接线：

const mapDispatchToProps=dispatch=>({
多勒克：（）=>{
调度（doMyRequest（）），
},
重置：（）=>{
调度（resetMyRequest（））；
}
});
//类型
const MY_REQUEST_RESET='MY_REQUEST_RESET'；
//动作创建者（可称为“动作”）
const resetMyRequest=（）=>（{type:MY_REQUEST_RESET}）

编辑：当我在这里时，这真的很恶心：

let newState=deepClone（状态）；

还有“我真的不知道我在做什么”的味道，可能会导致性能问题。您正在深入克隆通过redux启动的每个操作上的状态，即使这些操作不是此reducer感兴趣的操作

如果您要更改减速器中的状态，只需更改您关心的部分，不要更改“全部”

e、 g

导出默认值（状态={}，操作=>{
开关（动作类型）{
我的请求：
log（“发送请求”）；
返回{
成功：错，
失败：错，
答复：空
}
案例我的请求成功：
console.log（'SUCCESS'）；
返回{
…状态，//这将已经包含“fail:false”
成功：没错，
答复：行动.有效载荷
};
案例我的请求错误：
console.log（'FAIL'）；
返回{
…状态，//这将已经包含“success:false”
错误：正确，
答复：行动.有效载荷
};
违约：
返回状态；
}

不清楚您要的是什么。模式中有什么，表单？与其在关闭模式时重置状态而不发送请求，不如将草稿保存在模式的本地状态，并在成功传输后将其保存到redux商店。因为应用程序使用redux，所以没有理由son将存储存储区中的每个中间状态。如果模式包含表单，则除非提交，否则表单状态可能是该表单的本地状态。模式应该是自己的组件，在打开时从存储区装入初始状态。高度同意@trixn。Redux用于应用程序状态，而不是临时状态。H在react中，这是一个100%完全相同的东西。我无法告诉你，在一个应用程序中，开发人员决定将所有内容都放在redux中，而不是在适用的情况下与本地州一起工作，这是多么令人恼火。关于新操作，这将如何联系起来？只是想，如果我正在创建一个新的调度：

dispatch（resetMyModal（））

，它将以

req actions.js

中所示的格式执行我的操作-我是否忽略了

代理

，因为我没有发送实际的请求？我在

reducer

部分创建了一个新案例，如您上面所示。我只是对

操作

@physicsboy-添加一个连接到我的答案的p部分。啊哈！太棒了！我以为它不起作用，但看起来我不小心删除了另一个action XD。至于你（Trixn）的其他建议，我知道你的意思。获取已建立的代码库的问题，是吗？在某个时候会考虑摆脱deepClone。也许是技术债务。