在不触发 dispatch() 的情况下更新 state props - React Redux

Question

我有一个模式，其中包含一个触发 HTTP 请求的按钮，此时显示的 html 将根据来自服务器的成功/错误响应而改变，其中响应会更改在 @987654322 中处理的状态道具@函数。

我现在遇到的问题是，当我关闭它时，我想将模式重置为其初始状态预请求。 我以前通过使用本地组件状态来完成此操作，但后来更新了使用上面显示的请求映射状态道具的功能。

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

Component.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-actions.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
})

req-reducer.js

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

Answer 1

只需使用另一个动作：

case MY_REQUEST_RESET:
   return {} // only putting {} in here because this is what you have defined your initialState to be according to your reducer.

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

const initialState = {};

export default (state = initialState, action) => {
    switch(action.type) {
       ... your existing handlers
       case MY_REQUEST_RESET:
          return initialState
    }
}

接线：

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


// types
const MY_REQUEST_RESET = 'MY_REQUEST_RESET';

// action creator (may be referred to as "actions")
const resetMyRequest = () => ({ type: MY_REQUEST_RESET })

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

let newState = deepClone(state);

并带有“我真的不知道自己在做什么”的恶臭，并可能导致性能问题。您正在深度克隆通过 redux 触发的每个操作的状态，即使这些操作不是这个 reducer 感兴趣的操作。

如果你在reducer中改变状态，只改变你关心的部分，不要改变“全部”。

例如

export default (state = {}, action) => {
    switch (action.type) {
        case MY_REQUEST:
            console.log('SENDING REQUEST');
            return {
                success: false,
                fail: false,
                response: null
            }

        case MY_REQUEST_SUCCESS:
            console.log('SUCCESS');
            return {
                ...state, // this will contain "fail: false" already
                success: true,
                response: action.payload
            };

        case MY_REQUEST_ERROR:
            console.log('FAIL');
            return {
                ...state, // this will contain "success: false" already
                error: true,
                response: action.payload
            };

        default:
            return state;
    }