Redux State not updating. Redux tools show empty

Good evening everyone. React super noob here. trying to update the state on my reducer, but it will not update for the life of me. Please let me know what i'm doing wrong.

code below:

import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { fetchCodes,fetchLang } from "../actions";

class CodeDisplay extends React.Component{
 
    componentDidMount(){      
        this.props.fetchCodes();        
    }
    componentDidUpdate(){
        this.props.fetchLang();
    }

   renderCreate(){
       return(
        <Link to={'/add'} className="ui primary basic button">Add Code</Link>
       )       
   }

   renderTableData() {
      return this.props.code.map((c,i) => {
         const { id, CodeName, Code, DateAdded } = c //destructuring
         return (
            <tr key={i}>
               <td><i className="keyboard icon"></i></td> 
               <td>{id}</td>
               <td>
                    <Link to={`/show/${c.id}`} className="header">
                        {CodeName}
                    </Link>
               </td>
               <td>{Code}</td>
               <td>{DateAdded}</td>
               <td>
                    <div className ="ui buttons">
                        <Link to={`/update/${c.id}`} className="ui button primary">Edit</Link>
                    <div className ="or"></div>
                        <Link to={`/delete/${c.id}`} className="ui button negative">Delete</Link>
                    </div>
                </td>              
            </tr>
         )
      })
   }

    render (){
        return (
            <div>
                {this.renderCreate()}
                <table className="ui single line table">
                    <tbody>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Code Name</th>
                            <th>Code</th>
                            <th>Date Added</th>
                        </tr>
                        {this.renderTableData()}
                    </tbody>
                </table>
            </div>
        )
    }
}

const mapStateToProps = state =>{
    return {
        code: Object.values(state.code),
        lang:state.lang
    }
}

my reducer below

import _ from 'lodash';

import { 
    FETCH_LANG
} from "../actions/types";

export default (state = {}, action) => {
  switch (action.type) {
    case FETCH_LANG:
      return [...state, action.payload];
    default:
      return state;
  }
};

combined reducer below:

import { combineReducers } from "redux";
import { reducer as form} from "redux-form";
import CodeReducer from "./CodeReducer";
import LangReducer from "./LangReducer";

export default combineReducers({
    code:CodeReducer,
    lang: LangReducer,
    form:form    
});

index.js below:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware,compose} from 'redux';
import reduxThunk from 'redux-thunk';

import App from './components/App.js'
import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducers,
  composeEnhancers(applyMiddleware(reduxThunk))
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root')
);

Action creator below:

export const fetchLang = () => async dispatch => {
  const response = await api.get('/GetLang');

  dispatch({ type: FETCH_LANG, payload: response.data });
};

Any help would be very appreciated!