#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:ADDUSER,
payload: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
})