动作接收信息,但减速器什么都不做?

问题描述

我正在尝试将用户资源的实例发布到我的项目中。我注意到当我不得不等到重新启动项目以查看新实例时,状态并未更新。在我的项目中,用户和资源之间存在多对多关系,其中user_resource作为联接。

尽管该实例发布在我的后端,但它不会显示在前端。我的POST提取似乎获取了正确的数据,甚至执行了正确的操作,但是却无法更新化简器中的任何内容。我认为这可能与我为减速器设置特定案例有关,尽管我不知道自己在做什么错。当我使用调试器时,它会执行操作,但不会执行减速器。我尝试为user_resources创建一个完整的单独的reducer,但这也不起作用。

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

解决方法

您应该检查redux开发工具,我的猜测是您将数据写入了错误的位置。

这里:

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,],},};