Simply add an object to an empty array using action creators, redux, and thunk

Question

I want to simply add a new 'client' to my empty clientList located in my clientReducer. I can see everything is working clearly because when I console.log(state) in my clientReducer, I can see the information from the input has gone through the dispatch, the action creator and is now in the reducer. My issue is this chunk of code here... I am trying to keep adding clients to my redux store.

I tried using this.setState({}) but it doesn't read it.

Here is the clientActions:

export const addClient = (client) => {
    return(dispatch, getState) => {
        dispatch({type: 'ADD CLIENT', client})
    }
}

Here is the clientReducer:

const initState = {
    clientList: []
}

const clientReducer = (state = initState, action) => {
    switch (action.type) {

        case 'ADD CLIENT' : 
            let clientList =  [...state.clientList, action.client];
            this.setState({
              clientList : clientList
            })
            return state;
        
        default : return state;
    }
}    

export default clientReducer

Answer 1

You don't do setState inside reducer instead just return the updated state.

const clientReducer = (state = initState, action) => {
    switch (action.type) {

        case 'ADD CLIENT' : 
            let clientList =  [...state.clientList, action.client];
            return {
              ...state,
              clientList : clientList
            }

        default : return state;
    }
}    

export default clientReducer