#16 实现 Users Reducer


  • 4

    这样就对了.

    const ADD_USER = "ADD_USER"
    const DELETE_USER = "DELETE_USER"
    const UPDATE_USER = "UPDATE_USER"
    
    const usersReducer =(state=[],action)=>{
      switch(action.type){
        case ADD_USER:
          return [...state,action.user]
        case DELETE_USER:
          return[...state.slice(0,action.index),...state.slice(action.index+1)]
        case UPDATE_USER:
          return [...state.map((user, index) => {
            if (index === action.index) {
              return {...user, ...action.user}
            } else {
              return user 
            }
          })]
        default:
          return state
      }
      
    }
    

  • 0
    管理员

    @xzzzzz 根据规则进行解构,学习了

         [...state.map((user, index) => {
           if (index === action.index) {
              return {...user, ...action.user}
            } else {
              return user 
            }
          })]
    

  • 0

    @xzzzzz 这样是不是就修改了state,不算是纯函数了吧


  • 1

    删除和更新可以同样的数组操作,不用去遍历

    const usersReducer = (state=[],action) => {
      switch (action.type){
        case 'ADD_USER':
          return [...state, action.user];
          
        case 'DELETE_USER':
          return [
            ...state.slice(0, action.index),
            ...state.slice(action.index + 1)
          ];
        case 'UPDATE_USER':
           return [
            ...state.slice(0, action.index),
            {...state[action.index],...action.user},
            ...state.slice(action.index + 1)
          ];
        default:
          return state;
      }
    }
    

  • 0

    const usersReducer = function(state=[],action){
      let arr=state.concat([]);
      switch(action.type){
        case 'ADD_USER':
          return state.concat(action.user);
        case 'DELETE_USER':
          arr.splice(action.index,1);
          return arr;
        case 'UPDATE_USER':
          arr.splice(action.index,1,action.user);
          return arr;
        default:
          return state
      }
    }
    

    @胡子大哈 怎么不对


  • 0
    administrators

    @94dreamer 注意题目要求的:

    修改用户数据的时候,可以进行部分地修改,而不是完全地替换。

    例如:

    dispatch({
      type: 'UPDATE_USER',
      user: { username: 'Jerry' }
    })
    

    修改用户的时候可以单独修改某个字段,而不是完全替换掉数组中原来的对象。


  • 7

    const usersReducer = /* TODO */(state=[], action) => {
      switch (action.type) {
        case 'ADD_USER':
          return [...state, action.user];
        case 'DELETE_USER':
          let deState = [...state];
          deState.splice(action.index, 1);
          return deState;
        case 'UPDATE_USER':
          let upState = [...state];
          upState[action.index] = {...upState[action.index], ...action.user};
          return upState;
        default:
          return state;
      }
    }
    

  • 0

    定义了默认值的参数,不应该应该是函数的尾参数吗


  • 0

    const usersReducer = (state, action) => {
        if (!state) {
            return [];
        }
        switch (action.type) {
            case 'ADD_USER':
                return [...state, action.user];
            case 'DELETE_USER':
                let deState = [...state];
                deState.splice(action.index, 1);
                return deState;
            case 'UPDATE_USER':
                let upState = [...state];
                upState[action.index] = {...upState[action.index], ...action.user};
                return upState;
            default:
                return state;
        }
    };
    

  • 0

    const usersReducer = (state=[], action) => {
      switch (action.type) {
        case 'ADD_USER':
          return [...state, action.user]
        case 'DELETE_USER':
          return [...state.slice(0, action.index), ...state.slice(action.index + 1)]
        case 'UPDATE_USER':
          return [...state.slice(0, action.index), {...state[action.index], ...action.user}, ...state.slice(action.index + 1)]
        default: 
          return state;
      }
    }
    

    这样写的出来,可是第一次用react-redux做项目就无从下手


  • 2

    delete没那么麻烦吧,感觉返回没有这个的数组不就行了?

        case 'DELETE_USER':
          return state.filter((item)=>item!==state[action.index])
    

  • 0

    @waka 我也是这么写的,用的splice,加上对象的 ... 来实现更新操作


  • 0

    @heyunjiang 0_1500362841742_upload-f77964bd-e348-4a74-8713-fe59ac8765e4 这是全部覆盖,不是部分更新了


  • 0

    @ScriptOJ 请问下这个编辑器,在复制粘贴图片时,图片已经上传了,如果我再换张图片,之前已经上传的图片如何处理的呢?


  • 0

    const usersReducer = (state=[], action) => {
      switch (action.type) {
        case 'ADD_USER':
          return [...state,
            action.user
          ];
          break;
    
        case 'DELETE_USER':
          let copyState = [...state];
          copyState.splice(action.index, 1);
          return copyState;
          break;
    
        case 'UPDATE_USER':
          let newState = [...state];
          newState.splice(action.index, 1, action.user);
          return newState;
          break;
    
        default:
          return state;
      }
    }
    
    

  • 0

    有些明明可以直接返回新数组的还要用扩展操作符再包一个方括号显得太冗余了。这是我的:

    const usersReducer = (state=[], action) => {
      switch(action.type) {
        case 'ADD_USER':
          return state.concat(action.user)
        case 'DELETE_USER':
          return [...state.slice(0, action.index), ...state.slice(action.index + 1)]
        case 'UPDATE_USER':
          return state.map((user, index) => {
            if(index !== action.index) return user
            return {...user, ...action.user}
          })
        default:
          return state
      }
    }
    

  • 0

    @liyunsong 但是更新的话,可以只更新某一个字段吧~消耗可能会小点


  • 0

    大家看看这个

    const usersReducer = (state,action) =>{
      if(!state){
        return [];
      }
       switch (action.type) {
         case 'ADD_USER':
          return [...state,action.user];
         case 'DELETE_USER':
         return[...state.slice(0,action.index),...state.slice(action.index+1)]
          case 'UPDATE_USER':
          return[...state.slice(0,action.index),action.user,...state.slice(action.index+1)]
          default:
          return state;
       }
    }
    

  • 0

    const usersReducer = (state=[],action) => {
    switch(ation.type){
    case : 'ADD_USER':
    return state.push(action.user)
    break
    case : 'DELETE_USER':
    return state.splice(action.index,1);
    break
    case : 'UPDATE_USER':
    return [
    ...state.slice(0,action,index),
    {...state[action.index],...action.user},
    ...state.cliceaction.index+1
    ]
    break
    default:
    return state
    }
    }

    这样按道理没有问题吧?但是提交的时候有错


  • 0

    @yuexing0921 switch (action.type){
    case 'ADD_USER':
    return [...state, action.user]
    case 'DELETE_USER':
    return [...state.slice(0, action.index), ...state(action.index+1)]
    case 'UPDATE_USER':
    let updateInfo = {
    ...state[index],
    ...action.user
    }
    return [...state.slice(0, action.index), updateInfo,...state(action.index+1)]
    }


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待