有了React + Redux，我應該如何在商店中存儲配置文件？

Question

我的反應+ 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的配置文件。我應該如何處理這個問題？

謝謝，我的新反應+終極版

Answer 1

如果我在我的應用程序設計簡介，我會做類似下面的代碼。在這種情況下，我將用戶保存在一個數組中。或者，您可以使用一個對象或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: 'test@mail.com', 
 
    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。