What is the best practice to set initial state in reactjs constructor redux?

Question

I'm using reactjs and redux for my application. This is a piece of code from my Dashboard component. just wonder if assigning state with hard coded value in my constructor is considered bad practice.

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

Local state is fine. Even though if you are using Redux. You don't need to stop using setState() just because you're using Redux.

Redux is just a state management library in which you describe your application state as plain objects and arrays, also known as your store.

Before rendering your components, it's important to decide your state, to model your store. To help you decide if some state must be in the store (together with your whole application state), there are some questions you may ask:

• Do other components rely on that state?
• Do you need to persist (and/or trace) that state?

But only that doesn't answer your question (where to set initial state). If you decided to go with local state, I think your code is fine the way it is. If it needs to make part of your store, you need to set it as initial/default state for it.

You can do it in the createStore() function, passing the preloadedState argument. But if your default state is fixed (hardcoded), maybe you can put it in the initialState for dasboardReducer! Here's an example:

const initialState = {
    groupingFilter: 0,
    paginationInfo: { currentPage: 1, pageSize: 5 },
    sortInfo: ... 
};

function dashboardReducer(state = initialState, action) {
    // ...
}

What I would do in your case? I would keep all my dashboardRequest info in the store, managed by Redux. It's no a longer local state, I need to send it to the server, dispatching a side-effect action.

So, I would keep the definition of my default dashboardRequest info as my reducer's initialState, as in the example.

I really hope it helped you. Here are the readings I used for reference:

• You Might Not Need Redux, by Dan Abramov;
• setState() Gate, by Eric Elliott.

Real World examples are also welcome! Take a deep look at it: Redux Real World Example.

Good luck!