React Redux (is not) updating the state of an array from mysql db

This is my first react project and first JS project overall so I am incredibly new to the language though I have some prior experience with c#.

I got my app to a working version locally but my states and prop passing was getting out of hand so I wanted to implement redux before it gets worse. I have a getClients Axios function that seems to work with a local state but something about the way its set up isn’t working for redux. I set up console logs and debuggers and it looks like the reducer is seeing the action.payload just fine and should be updating the state. but my clientList variable with useSelector is always showing an empty array.

export default function ClientDisplay() {
  // const [clients, setClients] = useState([]);
  const clientList = useSelector((state) => state.clientList);
  const dispatch = useDispatch(); 
  
  useEffect(() => {
    getClients();
    console.log("initial load");
  }, []);
  
    const getClients = () => {
      Axios.get("http://localhost:3001/table/clients").then((response) => {
        console.log("getClients trigered")   
        dispatch(setClientList(response.data));
      });
    };

import { createSlice } from "@reduxjs/toolkit"


export const clientListSlice = createSlice({
    name: 'ClientList',
    initialState: [],
    reducers: {
        setClientList(state, action) {
            state = action.payload;
        },
    },
});

export const {setClientList} = clientListSlice.actions

export default clientListSlice.reducer;

const store = configureStore({
    reducer : {
        activeClient: activeClientReducer,
        clientList: clientListReducer,       
    },
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
    <App />
    </Provider>
);

Answer

Try defining the initialState properly.

export const clientListSlice = createSlice({
    name: 'clientList',
    initialState: {clients:[]},
    reducers: {
        setClientList(state, action) {
            state.clients = action.payload;
        },
    },
})

and then in useSelector

const {clients} = useSelector((state) => state.clientList);

Advertisement

Answer