Actions takes in info but reducer doesn't do anything?

Question

I am trying to POST an instance of a user resource to my project. I noticed the state wasn't updating when I had to wait until I restarted my project to see the new instance. In my project there is a many to many relationship between users and resources with user_resource as the join.

Although the instance is posted on my backend, it wont show up on the frontend. My POST fetch seems to take in the correct data, and even hit the correct action, but then fails to update anything in the reducer. I think this may have to do with how I set up that particular case for the reducer though I don't know what I'm doing wrong. When I use debuggers it hits the action, but never the reducer. I tried creating a whole separate reducer for user_resources but that isn't working either.

fetch('http://localhost:3000/user_resources', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              Accept: 'application/json'
          },
          body: JSON.stringify({
              resource_id: item.id,
              user_id: this.props.users.id,
              name: item.name,
              description:item.description,
              link:item.link,
          
          })
      })
          .then(res => res.json())
          .then(data2 => {
            console.log(data2)
              this.props.addUserResource(data2)
              console.log(this.props)
              debugger
           })
  }

let userInitialState = {
  id: 0,
  username: "",
  name: '',
  category: '',
  token: "",
  user_resources:[],
}

let userReducer = (state = userInitialState, action) => {
  debugger
   switch(action.type){
    case "ADD_USERS":
      let singleNestedObject = { 
        ...action.users.user, 
        token: action.users.token
      }
      return {
        ...state,
        username: action.users.user.username,
        token: action.users.token,
        id: action.users.user.id,
        name: action.users.user.name,
        category: action.users.user.category,
        user_resources: action.users.user.user_resources
      }
      case "ADD_ONE_USER_RESOURCE":
        let copyOfResources = [...state.users.user.user_resources, action.userResources]
        debugger
        console.log(...state.user_resources)
        console.log(action.userResources)
        console.log(copyOfResources)
      return {
        ...state, 
        user_resources: action.userResources
        }
      default: 
        return state
    }
  }

export const addUserResource = (resourceInfo) => {
  console.log("here")
  return {
    type: "ADD_ONE_USER_RESOURCE",
    userResources: resourceInfo
  }
}

yea I have a combineReducer and this is included. The other case in this reducer is called but not ADD_ONE_USER_RESOURCE — st123, Aug 19 '20 at 16:06

score 1 · Answer 1 · answered Aug 19 '20 at 17:06

You should check the redux dev tools, my guess is that you write the data in the wrong place.

Here:

let copyOfResources = [...state.users.user.user_resources, action.userResources]

the resources are in state.users.user.user_resouces but here:

return {
  ...state,
  user_resources: action.userResources,
};

You write the resources to state.user_resources

I think you need to do:

return {
  ...state,
  users: {
    ...state.users,
    user: {
      ...state.users.user,
      user_resources: [
        ...state.users.user.user_resources,
        action.userResources,
      ],
    },
  },
};

Actions takes in info but reducer doesn't do anything?

1 Answers1