习惯的方法反应,终极版

问题描述:

我想知道的惯用方式是什么反应,和/终极版用于处理返回的关系数据(以及如何更新了Redux店)API响应。比方说,当用户登录时,我们作出这样的API请求来检索用户数据:习惯的方法反应,终极版

GET /users/[:id]

回报:

{ 
    "id": 14, 
    "first_name": "Bob", 
    "last_name": "Smith", 
    "appointments": [ 
    { 
     "id": 234, 
     "time": "morning" 
    }, 
    { 
     "id": 456, 
     "time": "afternoon" 
    } 
    ], 
    "roles": [ 
    { 
     "id": 789, 
     "description": "EYE_DOCTOR" 
    }, 
    { 
     "id": 654, 
     "description": "EAR_DOCTOR" 
    } 
    ] 
} 

我很困惑之间,其中这2种方法是“更好”(或者如果有另一个)。

方法1:进口关系的行动(rolesFetched,appointmentsFetched)为userActions.js和调度从那里。适当的reducer将处理他们感兴趣的操作。这是将roleAction导入userActions文件的“良好”习惯吗?

// userActions.js 

export function login(data) { 
    return dispatch => 
    usersApi.fetch(data).then(user => { 
     dispatch(userFetched(user)); 
     dispatch(rolesFetched(user.roles)); 
     dispatch(appointmentsFetched(user.appointments)); 
    }); 
} 

方法2:只派遣userFetched行动,并有rolesReducer和appointmentsReducer听那个(是“良好”习惯来监听用户的动作,如果你是一个角色减速?):

// userActions.js 

export function login(data) { 
    return dispatch => 
    usersApi.fetch(data).then(user => { 
     dispatch(userFetched(user)); 
    }); 
} 

// rolesReducer.js 

export default function rolesReducer(state = initialState, action = {}) { 
    switch (action.type) { 
     case USER_FETCHED: 
      return action.user.roles; 
     default: 
      return state; 
    } 
} 

对于这种情况,假设角色几乎是静态的。他们只需在登录后刷新。但是,约会数据更经常刷新,并有一个单独的行动/ reducer来获取约会数据(无需获取用户/角色数据)

+0

[有一个禁止要求最佳实践的动作。](https://meta.*.com/questions/312021/prevent-eliminate-best-practices-from-titles)我个人认为他们要求意见。 – Rob

+0

好吧,我会更新这个问题。 –

很难分辨你的应用程序有多复杂,但这里是一些意见:

  • 你不需要几个减速器。只需要一次reducer和一个reducer函数就可以将API的整个响应保存到你的状态。 (如果你的状态结构有点不同,你可以在reducer里进行修改)。

  • 我想你只需要得到你的主要国家结构正确,然后用一个大的减速处理所有不同的动作开始。如果它变得太大,你可以从不同的文件开始切片,但从架构的角度来看,它仍然是一个减速器。

  • 如果以后你有一个不同的API,例如只提取约会,那么为此添加一个reducer函数(不是新的reducer),并在该状态下更新该用户。

  • 没有什么错在我看来,在具有作用减速听取用户的操作。但再一次在你的情况下,他们应该是相同的减速器,因为他们访问相同的状态。

  • 当设计你的状态,尝试(从后来访问做出反应时,它很有用),以保持尽可能平坦,并尝试从来没有重复的数据。

好运

+0

感谢您的回复。我想我的问题是,你会推荐店面的样子是什么?我使用combineReducers创建一个看起来像{{user:{},roles:[],约会:[]}'的商店。我以这种方式分解了它,因为我认为在订阅“子”实体的组件方面效率会更高 - 即不是订阅“用户”状态,您可以订阅“角色”状态并仅更新/重新-render组件,当角色改变时,而不是用户中的任何东西。 你可以扩展什么可以进一步“扁平化”? –

+0

我会离开它,因为角色和约会与用户有关:'{user:{roles:[],appointmentments:[]}}'。当从React组件订阅时,你可以这样做: 'const mapStateToProps =(state)=> {return {roles:state.user.roles};};'在这种情况下,你的组件只会更新如果角色已经改变。 – klugjo

+0

好的 - 但是这不会使减速机变得庞大,需要大量的操作来处理吗?由于应用程序中的所有数据都与用户有关,所以好像我们将所有内容都塞进一个文件中。而用这种方法,你可以得到更加细化和组织。即userActions文件,userReducer,userApi。一个rolesActions文件,rolesReducer和rolesApi,以及与约会和任何其他数据相同。你如何保持你的应用程序中的大文件组织? –

在我看来,你的减速和行动必须基于工作流,而不是基于实体。

在你的情况,而不必userReducer,rolesReducer和appointmentReducer,你可以有一个loginReducer,其处理与用户的所有状态更新。