#16 实现 Users Reducer


  • 0
    administrators

    完成一个符合 Redux 要求的 Reducer usersReducer,它可以支持以下对一个存储用户信息的数组进行增、删、改的需求:

    /**
     * 用户的数据包括三部分,姓名(username)、年龄(age)、性别(gender)
     */
    
    /* 增加用户操作 */
    dispatch({
      type: 'ADD_USER',
      user: {
        username: 'Lucy',
        age: 12,
        gender: 'female'
      }
    })
    
    /* 通过 id 删除用户操作 */
    dispatch({
      type: 'DELETE_USER',
      index: 0 // 删除特定下标用户
    })
    
    /* 修改用户操作 */
    dispatch({
      type: 'UPDATE_USER',
      index: 0,
      user: {
        username: 'Tomy',
        age: 12,
        gender: 'male'
      }
    })
    

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

    注意,usersReducerstate 就是一个数组,你不需用把它包装到一个对象当中。


  • 0

    提交很多遍了,'UPDATE_USER' 提示没有正确覆盖原来的数据,求指教!解答后会编辑掉此解

    [已解决]


  • 0
    administrators

    @Sunjourney 注意题目倒数第二行:

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


  • 0

    @胡子大哈 ok,懂了,确实这样支持部分更新


  • 0

    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,state.length)]
        case UPDATE_USER:
          return{...state,user:state.map((item,index)=>{
                  if(index==action.index){
                    return action.user
                  }
          })}
        default:
          return state
      }
      
    }
    

    提示没有正确删除用户,我看你小书里面就是这样用的 数组 删除的 我这里怎么就不行了?


  • 0
    administrators


  • 0

    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,user:state.map((item,index)=>{
                  if(index==action.index){
                    return action.user
                  }
          })}
        default:
          return state
      }
      
    }
    

    0_1495077115234_upload-8103bfb8-e63f-4d62-b397-79650eda66f8 ![alt text](image url)

    state 里面只有 user对象的数组 这样用为什么会报错,好吧js基础 请大佬指点一下


  • 1
    administrators

    @小栋同学UPDATE_USER 的时候返回了个对象,应该永远是数组。


  • 0

    @Sunjourney 我最后也是报这个错误 怎么部分替换 ?


  • 1

    @小栋同学 注意题目倒数第二行。用 spread


  • 2

    这样就对了.

    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,不算是纯函数了吧


  • 2

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

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

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


  • 5

    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做项目就无从下手


登录后回复
 

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