Question

我有一个包含触发HTTP请求的按钮的模式，这时显示的html会根据服务器的成功/错误响应而变化，其中响应会更改{{ 1}}功能。

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

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

Component.jsx

mapStatesToProps

req-actions.js

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

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触发的每个动作上深度克隆状态，即使这些动作不是这个reduce感兴趣的。

如果您要更改减速器中的状态，只需更改您所关注的零件，而不要更改它的“全部”。

例如

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

更新状态道具而无需触发dispatch（）-React Redux

1 个答案: