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

Question

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>
);

It's been a while since I've used Redux, and I haven't used createSlice before, but does it matter that the slice name is ClientList rather than clientList? — Alan Friedman
– Alan Friedman, Commented Jul 11, 2022 at 16:24
@AlanFriedman I'm not sure myself. I have tried it both ways. As clientList is shows as a blank array, as ClientList it is undefined. I believe clientList is correct but I could be wrong. — KontonAkumu
– KontonAkumu, Commented Jul 11, 2022 at 16:36

Kaneki21 · Accepted Answer · 2022-07-11 16:37:25Z

1

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);

edited Jul 11, 2022 at 16:37

answered Jul 11, 2022 at 16:29

Kaneki21

1,4222 gold badges7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KontonAkumu Over a year ago

Thanks for the reply. I implemented your suggestion and now console.log(clientList) is undefined.

Kaneki21 Over a year ago

Can you please try with the updated code

KontonAkumu Over a year ago

I missed the change to the c in ClientList. It looks like its working but i need to change my mapping and client information. Thanks!!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related