在 Redux 应用里,初始化状态通常可以通过哪些方式来完成,各自适用于什么场景?
考察说明
考察对 Redux 初始状态设置机制的理解及应用场景。
回答思路
- 【回答框架 1】Redux 中初始状态可以通过 createStore 的第二个参数 preloadedState 直接传入,这是最基础和常用的方式。它适用于应用启动时已有同步数据的场景,如从 localStorage 恢复数据或服务端渲染时注入的数据。
- 【回答框架 2】对于异步获取的数据,如从后端接口拉取,通常先设置一个初始的占位状态,再在异步操作完成后通过 action 更新。
- 【回答框架 3】当使用 combineReducers 时,每个 reducer 的默认参数值也可以作为初始状态的一部分,但要注意 combineReducers 会用传入的 preloadedState 覆盖对应 reducer 的默认值。
- 【回答框架 4】在 Redux Toolkit 中,创建 slice 时可以在 initialState 中定义初始状态,内部使用 createSlice 时更推荐这种方式。
- 【回答框架 5】对于服务端渲染,preloadedState 从服务端传入,客户端 hydrate 时作为初始状态,确保一致性。
- 【关键点 1】createStore 的第二个参数是 preloadedState,用于设置初始状态。
- 【关键点 2】reducer 默认参数可作为初始状态的备选方案。
- 【关键点 3】Redux Toolkit 的 createSlice 通过 initialState 定义初始状态。
- 【易错点 1】不要直接修改 state 对象,应使用不可变更新。
- 【易错点 2】异步数据初始状态应为空或默认值,避免渲染错误。
- 【易错点 3】preloadedState 不能包含非可序列化对象,否则 Redux DevTools 可能报错。