Question

我正在为我的应用程序使用reactjs和redux。这是我的Dashboard组件的一段代码。只是想知道在我的构造函数中使用硬编码值分配状态是否被认为是不好的做法。

export class Dashboard extends React.Component{

    constructor(props, context) {
        super(props, context);
        this.state={
            dashboardRequest : {
                groupingFilter  : 0, paginationInfo :{ currentPage : 1, pageSize : 5} ,  sortInfo : {sortBy  : 'grossNotional', ascending : true}
            }
        };
        autoBind(this);
    }

    onChange(current){
        const dashboardRequest = this.state.dashboardRequest;
        dashboardRequest.paginationInfo.currentPage = current;
        this.setState({dashboardRequest : dashboardRequest});
        this.props.actions.fetchDashboard(this.state.dashboardRequest);
    }
}
function mapStateToProps(state) {
    return {
        dashboard: state.dashboard,
        isLoading : state.dashboard.isLoading,
        isOverflow : state.dashboard.isOverflow,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(AppActions, dispatch)
    };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Dashboard);

export const dashboardReducer = (previousState = { }, action) => {
    let {type, ...actionData} = action;
    switch (type) {
        case 'LOAD_DASHBOARD_DATA':
            return {...previousState, ...actionData};
        case 'ADD_DASHBOARD_DATA':
            return {...previousState, ...actionData};
        default:
            return previousState;
    }
};

Answer 1

当地的州很好。即使您使用的是Redux。您无需仅因为使用Redux而停止使用setState() 。

Redux只是一个状态管理库，您可以在其中将应用程序状态描述为纯对象和数组，也称为存储

在渲染组件之前，决定您的状态，建模您的商店非常重要。为了帮助您确定某个州是否必须在商店中（以及您的整个申请状态），您可能会问一些问题：

其他组件是否依赖于该状态？

您是否需要坚持（和/或跟踪）该状态？

但只有那个没有回答你的问题（在哪里设置初始状态）。如果你决定选择本地州，我认为你的代码就像它一样好。如果需要参与商店的一部分，则需要将其设置为初始/默认状态。

您可以在createStore()函数中执行此操作，并传递preloadedState参数。但是如果您的默认状态是固定的（硬编码），也许您可以将其放在initialState dasboardReducer中！这是一个例子：

const initialState = { groupingFilter: 0, paginationInfo: { currentPage: 1, pageSize: 5 }, sortInfo: ... }; function dashboardReducer(state = initialState, action) { // ... }

在您的情况下我会做什么？我会将所有dashboardRequest信息保存在商店中，由Redux管理。它不再是一个本地状态，我需要将它发送到服务器，发送一个副作用动作。

因此，我会将默认dashboardRequest信息的定义保留为我的reducer的initialState，如示例所示。

我真的希望它对你有所帮助。以下是我用作参考的读物：

You Might Not Need Redux，Dan Abramov;

setState() Gate，Eric Elliott。

欢迎来自真实世界的例子！仔细看看它：Redux Real World Example。
祝你好运！

在reactjs构造函数redux中设置初始状态的最佳实践是什么？

1 个答案: