Question

当触发动作updateLog时，它似乎会重置其他状态项。在我的情况下，updateLog应该操作log，这很好。问题是它还将tasks重置为默认值。我在这里做错了什么？

组件：

class Generator extends Component {
    render() {
        return (
            <div className="generator">
                <Inputs />
                <button onClick={this.generate.bind(this)}>Go!</button>                           
                <Log />                                
            </div>
        );
    }

    generate() {        
        this.props.updateLog("ANYTHING!");
    }
}

function mapStateToProps(state) {
    return {
        tasks: state.tasks        
    };
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({updateLog: updateLog}, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(Generator);

动作：

export const updateLog = (message) => {
    return {
        type: 'LOG_UPDATED',
        payload: message
    }
};

Logreducer：

const initialLog = "";

export default function (state = initialLog, action) {    
    switch (action.type) {
        case 'LOG_UPDATED':            
            return state + "\n" + action.payload            
            break;
    }    
    return state;
}

所有减速器：

const allReducers = combineReducers({
    tasks: taskReducer,
    log: logReducer
});

export default allReducers

taskReducer：

export default function (state = null, action) {
    switch (action.type) {
        case 'TASK_UPDATED':
            var tasks = Object.assign({}, action.payload);            
            return tasks;
            break;
    }

    // Default task properties
    return {
        CreateDatabaseTask: {
            enabled: false,
            type: "sqlite"
        }
    }
}

Answer 1

问题出在你的减少任务上。 如果操作类型与switch语句中定义的操作类型都不匹配，则应返回当前状态。而是返回初始状态。

尝试更改它以返回当前状态：

const initialState = {
    CreateDatabaseTask: {
        enabled: false,
        type: "sqlite"
    }
}

export default function (state = initialState, action) {
    switch (action.type) {
        case 'TASK_UPDATED':
            var tasks = Object.assign({}, action.payload);            
            return tasks;
            break;

        default:
            return state;
    }
}

React redux操作重置非附加状态

1 个答案: