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

Question

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

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。您不需要停止使用 setState() 仅仅因为您正在使用 Redux。

Redux 只是一个状态管理库，您可以在其中将应用程序状态描述为普通对象和数组，也称为>商店。

在渲染组件之前，决定您的状态以及为您的商店建模非常重要。为了帮助您确定商店中是否必须存在某些状态(以及您的整个应用程序状态)，您可能会问一些问题:

• 其他组件是否依赖该状态？
• 您需要保留(和/或跟踪)该状态吗？

但这并不能回答你的问题(在哪里设置初始状态)。如果您决定使用本地状态，我认为您的代码就这样就可以了。如果它需要成为您商店的一部分，您需要将其设置为初始/默认状态。

您可以在 createStore() 中进行操作函数，传递 preloadedState 参数。但如果您的默认状态是固定的(硬编码)，也许您可​​以将其放入 dasboardReducer 的 initialState 中!这是一个例子:

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 ，丹·阿布拉莫夫；
• setState() Gate ，作者:埃里克·埃利奥特。

也欢迎现实世界的例子!深入看看:Redux Real World Example .

祝你好运!