Question

我是React / Redux的新手。请帮我弄清楚在redux中更新状态的更好方法是什么？在我的减速机或减速机的许多情况下，我可以调用一堆动作并管理状态我可以在react组件中管理状态，并且只在一个reducer的情况下只调用一个动作来更新状态。

// Option #1
const reducer = (state = {items: [], counter: 0, someAnotherData: {}}, action) => {
    switch (action.type) {
        case ADD_ITEM: {
            const updatedItems = state.items.concat(action.payload);
            return Object.assign({}, state, {items: updatedItems});
        }
        case REMOVE_ITEM: {
            const updatedItems = state.items.filter(e => e.id !== action.payload);
            return Object.assign({}, state, {items: updatedItems});
        }
    }
    // cases for counter and someAnotherData
};

// component
render() {
    // ...
    <Button onClick={() => dispatch({type: 'ADD_ITEM', payload: item})}>
        Add
    </Button>
    <Button onClick={() => dispatch({type: 'REMOVE_ITEM', payload: id})}>
        Remove
    </Button>
    {...}
}

// Option #2
const reducer = (state = {items: [], counter: 0, someAnotherData: {}}, action) => {
    switch (action.type) {
        case 'UPDATE_DATA':
            return Object.assign({}, state, action.payload);
        // no more cases
        default:
            return state;
    }
};

// component
addItem = (item) => {
    const updatedItems = this.props.items.concat(item);
    this.props.dispatch({type: 'UPDATE_DATA', payload: {items: updatedItems}});
}

removeItem = (id) => {
    const updatedItems = this.props.items.filter(e => e.id !== id);
    this.props.dispatch({type: 'UPDATE_DATA', payload: {items: updatedItems}});
}

render() {
    // ...
    <Button onClick={() => this.addItem(item)}>
        ADD
    </Button>
    <Button onClick={() => this.removeItem(id)}>
    REMOVE
    </Button>
    {...}
}

对我来说选项＃2似乎更好，因为我可以看到同一个文件中发生了什么，但我不确定这是正确的方法。

Answer 1

您最好使用ActionCreators，如下所示：

function mapActionsToProps(dispatch) {
    return {
        actionCreator1: () => dispatch(updateDataAC())
    };
}

将此组件作为第二个参数传递，同时将组件连接到存储，如下所示：

export default connect(mapStateToProps, mapActionsToProps)(ComponentName);

然后在您的组件中，您可以使用prop actionCreator1来调用动作创建者：addItemAC，它在某些配置文件中具有以下定义：

export const addItemAC = () => ({
    type: 'ADD_ITEM'
});

这基本上可以帮助您保持代码清洁，更有条理。

Answer 2

只需使用Redux's official document中的最佳做法。

简单地说，我们将使用Actions和ActionCreators来封装Store数据更改的所有复杂性。

在redux中更新状态的更好方法是什么？

2 个答案: