is there a reason for having both set... and clear... functions? Could we just call set... with null?

Just for clarity - we could also call set... with null and it would do the same thing.

Should we simplify to just have set... then? Mainly to reduce the number of things we have to pass around/import

Yeah, my inclination to do it this way was just that clearError seems a little more encapsulated than setError(null) because it lets the redux file handle what "clear" means. Just in case something like setError(undefined) yields unexpected results because we're expecting null somewhere else. I don't have a strong preference though so I can simplify this to reduce the number of props.

@sanchitmalhotra126 I think you are on the right track that the action describes the event (a error was cleared) and the reducer determines how that impacts the state (sets something to null).

You can use the use the object syntax of mapDispatchToProps. These 5 lines can be replaced with:

{ closeEditorDialog, clearNewFileError, clearRenameFileError }

I'm just looking at this codebase for the first time, but have y'all considered using the official Redux Toolkit for some of your reducers? It is so much easier to write, especially when there are loads of action constants like here. With createSlice you just define the reducer case for each action and it generates the action type strings and action creator functions automatically.

If this is something that you are interested in, I'd be happy to help!

I haven't converted the whole file, but here is part of it to give you an idea:

const { reducer, actions } = createSlice({
    // this becomes the prefix for all action type names
    name: 'javalab',
    // same initialState as before
    initialState,
    // define the handling for each action, using mutations on a draft state object.
    reducers: {
        appendInputLog: (state, action) => {
            state.consoleLogs.push({ type: 'input', text: action.payload });
        },
        appendOutputLog: (state, action) => {
            state.consoleLogs.push({ type: 'output', text: action.payload });
        },
        appendNewlineToConsoleLog: (state) => {
            state.consoleLogs.push({ type: 'newline' });
        },
        appendMarkdownLog: (state, action) => {
            state.consoleLogs.push({ type: 'markdown', text: action.payload });
        },
        clearConsoleLogs: (state) => {
            state.consoleLogs = [];
        },
        setRenderedHeight: (state, action) => {
            state.renderedEditorHeight = action.payload;
        },
        setLeftWidth: (state, action) => {
            state.leftWidth = action.payload;
        },
        setRightWidth: (state, action) => {
            state.rightWidth = action.payload;
        },
        setInstructionsHeight: (state, action) => {
            state.instructionsHeight = action.payload;
        },
        setInstructionsFullHeight: (state, action) => {
            state.instructionsFullHeight = action.payload;
        },
        setConsoleHeight: (state, action) => {
            state.consoleHeight = action.payload;
        },
        setEditorColumnHeight: (state, action) => {
            state.editorColumnHeight = action.payload;
        }
    }
});

export default reducer;

// action creator functions are automatically generated!
export const {
    appendInputLog,
    appendOutputLog,
    appendNewlineToConsoleLog,
    appendMarkdownLog,
    clearConsoleLogs,
    setRenderedHeight,
    setLeftWidth,
    setRightWidth,
    setInstructionsHeight,
    setInstructionsFullHeight,
    setConsoleHeight,
    setEditorColumnHeight
} = actions;

Hi @lindapaiste thanks for the suggestion! I believe use a slightly customized version of redux but this is definitely something we can look into.