有了React + Redux，我应该如何在商店中存储配置文件？

我的反应+ redux应用程序需要在商店中存储用户配置文件。示例数据：有了React + Redux，我应该如何在商店中存储配置文件？

{"user_id":11,"stuff":"more stuff"}, {"user_id":313,"stuff":"more stuff"},{"user_id":13111,"stuff":"more stuff"},{"user_id":21,"stuff":"more stuff"}

我应该如何将此存储在我的商店中？如果有帮助，我可以重新格式化上述数据？

我需要store.profiles来存储一个或多个配置文件，它可能包括current_user的配置文件。

然后，我需要我的Profile组件能够在组件渲染时在存储中查找或获取current_user的配置文件。我应该如何处理这个问题？

谢谢，我的新反应+终极版

来源

2017-06-19 AnnaSm

您是否需要同时使用多个用户配置文件？如果没有，那么只需在商店中有一个密钥来“存储”一个用户。如果你这样做了，你需要使用'mapStateToProps'来查找/获取current_user的配置文件（就像你在上一个问题中那样）来筛选正确的用户配置文件。 –

我将需要一次超过一个配置文件... – AnnaSm

如果我在我的应用程序设计简介，我会做类似下面的代码。在这种情况下，我将用户保存在一个数组中。或者，您可以使用一个对象或Map。

// reducer 
 
function userReducer(state = [], action) { 
 
    switch(action.type) { 
 

 
    // adding new user, just append to the end of array 
 
    case ADD_USER: 
 
     return [...state, {...action.payload.user }] 
 
    
 
    // editing an existing user, must check if exists! Othewise return original state 
 
    case EDIT_USER: 
 
     const filteredUsers = state.filter(user => user.id === action.payload.user.id); 
 
     const isUserExist = filteredUsers.length > 0; 
 
     if (isUserExist) { 
 
     const updatedUser = { ...filteredUsers[0], ...action.payload.user }; 
 
     return [...state.filter(user => user.id !== action.payload.user.id), updatedUser]; 
 
     } else { 
 
     return state; 
 
     } 
 
     
 
    default: 
 
     return state; 
 
    } 
 
} 
 

 
// sample user obj 
 
{ 
 
    id: 'unique-id', 
 
    first_name: 'bob', 
 
    last_name: 'jones', 
 
    email: '[email protected]', 
 
    photo_url: 'some url', 
 
    bio: 'some text' 
 
} 
 

 
// container.js 
 
const mapStateToProps = (store) => ({ 
 
    users: state.users, 
 
    getUser: (userId) => state.users.filter(user.id === userId), 
 
}); 
 

 
const mapDispatchToProps = (dispatch) => ({ 
 
    editUser: (userId) => dispatch(editUser(userId)) 
 
}) 
 

 
// actions.js 
 
import uuid from 'uuid/v4'; 
 

 
function editUser(payload) { 
 
    return { 
 
    type: 'EDIT_USER', 
 
    ...payload 
 
    } 
 
} 
 

 
function addUser(user) { 
 
    return { 
 
    type: 'ADD_USER', 
 
    payload : { 
 
     user: { 
 
     ...user, 
 
     id: uuid() 
 
     } 
 
    } 
 
    } 
 
} 
 

 
// probably shouldn't edit id 
 
payload { 
 
    id: 'uniquestring', 
 
    first_name: 'momo', 
 
    last_name: 'wawa', 
 
    // ... the rest of the changes 
 
}

这假定您已经知道了终极版的基础知识。否则，请阅读this tutorial。

来源

2017-06-19 06:08:25

谢谢，在这个例子中，userId被设置在哪里？ – AnnaSm

我编辑了我的答案。我会在reducer中使用uuid库创建它：https://www.npmjs.com/package/uuid。一旦用户设置了id，就不应该改变它。 –

请注意，在减速器中生成新的UUID是不鼓励的，因为减速器不再是纯函数。代码将运行，但在时间行程调试下测试并不能正确工作。理想情况下，动作创建者应该生成随机值 - 请参阅https://daveceddia.com/random-numbers-in-redux/。 – markerikson

有了React + Redux，我应该如何在商店中存储配置文件？

回答

相关问题