Действия принимают информацию, но редуктор ничего не делает?

Question

Я пытаюсь отправить экземпляр пользовательского ресурса в свой проект. Я заметил, что состояние не обновлялось, когда мне приходилось ждать, пока я перезапущу свой проект, чтобы увидеть новый экземпляр. В моем проекте между пользователями и ресурсами существует связь "многие ко многим" с user_resource в качестве соединения.

Хотя экземпляр размещен на моем сервере, он не будет отображаться во внешнем интерфейсе. Моя выборка POST, похоже, принимает правильные данные и даже выполняет правильное действие, но затем не может ничего обновить в редукторе. Я думаю, это может быть связано с тем, как я настроил этот конкретный случай для редуктора, хотя я не знаю, что делаю не так. Когда я использую отладчики, он попадает в действие, но не в редуктор. Я попытался создать отдельный редуктор для user_resources, но это тоже не работает.

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
  }
}

Answer 1

Вы должны проверить инструменты redux dev, я предполагаю, что вы пишете данные не в том месте.

Вот:

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

ресурсы находятся в state.users.user.user_resouces но здесь:

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

Вы пишете ресурсы state.user_resources

Думаю нужно сделать:

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