Redux-reduce使用

118 阅读1分钟

#Reducer

1.一个数据仓库,有且只有一个reducer。

2.store.dispatch,分发一个action,调用reducer

3.reducer是纯函数

4.combineReducers:合并reducer,得到一个新的reducer.

<loginAction.js>
//登录Action
expotr function loginAction(user){
   return {
     type:LOGINTYPE,
     payload:user
   }
}

<userAction.js>
 //用户信息
export const ADDUSER = Symbol("add-user");
export const DELETEUSER = Symbol("delete-user");
export const UPDATEUSER = Symbol("update-user");
//新增用户
export const addUserAction = (user) =>({
   type:ADDUSERpayload:user
})
//删除用户
export const deleteUserAction = (id) =>({
   type:DELETEUSER,
   payload:id
})
//更新用户
export const updateUserAction= (id,newUser) =>({
   type:UPDATEUSER
   payload:{
     ...newUser,
     id
   }
})

<user.js>
const initialState = [
   { id: uuid(), name: "用户1", age: 20 },
   { id: uuid(), name: "用户2", age: 18 }
]

export default(state=initialState,{type,payload})=> {
   switch(type) {
      case usersAction.ADDUSER:
            return [...state, payload];
        case usersAction.DELETEUSER:
            return state.filter(it => it.id !== payload);
        case usersAction.UPDATEUSER:
            return state.map(it => it.id === payload.id ? {...it,         ...payload} : it);
        default:
            return state
   }
}

<index.js>

export default combineReducers({
    loginUser: loginUserReducer,
    users: usersReducer
})