前端架构设计：使用 Immutable.js 管理大型应用的状态

import { fromJS } from 'immutable';
 
// 假设我们有一个应用的初始状态
const initialState = fromJS({
    user: null,
    settings: {
        themeName: 'snow',
        useSingleLineBreaks: true
    },
    entities: {
        users: {
            // 用户ID为键，用户对象为值
        },
        posts: {
            // 帖子ID为键，帖子对象为值
        }
    }
});
 
// 创建一个reducer来处理用户登录的action
function login(state, action) {
    // 使用setIn来更新嵌套的数据结构
    return state.setIn(['user', 'id'], action.payload.userId);
}
 
// 创建一个reducer来处理用户登出的action
function logout(state, action) {
    return state.set('user', null);
}
 
// 根据action的type调用相应的reducer
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'LOGIN':
            return login(state, action);
        case 'LOGOUT':
            return logout(state, action);
        default:
            return state;
    }
}
 
// 使用reducer来处理状态更新
const newState = reducer(undefined, { type: 'LOGIN', payload: { userId: '123' } });

这个例子展示了如何使用Immutable.js来管理一个大型应用的状态。我们定义了一个初始状态，然后创建了处理登录和登出操作的reducer。在reducer中，我们使用了setIn方法来安全地更新嵌套的数据结构。这种不可变的数据处理方式使得我们能够在不直接修改原始状态的情况下表示状态的变化，这有助于维护应用的状态不变性。