React+Redux中如何在reducer内重置所有props为初始值仅保留posterUrl

实现方案 #

直接修改RESET_MOVIE_STATE对应的分支逻辑即可，核心逻辑是先复用初始状态的所有movie属性，再用当前状态的posterUrl覆盖初始值，实现其他属性全重置、仅保留posterUrl的效果：

export const movieReducer = (state = initialState, action: MovieActions): IMovieState => {
  switch (action.type) {
    case MovieActionTypes.FETCH_MOVIE: {
      return { ...state, movie: action.payload };
    }
    case MovieActionTypes.RESET_MOVIE_STATE: {
      return {
        ...state,
        movie: {
          ...initialState.movie,
          // 仅保留当前状态的posterUrl，其余属性用初始值覆盖
          posterUrl: state.movie.posterUrl
        }
      };
    }
    default:
      return state;
  }
};

这个写法兼容性很强，后续如果给movie新增其他属性，不需要修改重置逻辑，新增属性会自动复用初始值。

TypeScript的影响 #

使用TypeScript对该实现没有负面影响，反而能提供类型校验保障：

• 只要你的IMovieState类型定义正确，TypeScript会自动校验movie下的属性合法性，如果你误写了不存在的属性、或者属性类型不匹配，编译阶段就会抛出错误提示
• 不需要额外写类型断言或者额外的类型处理代码，上面的示例代码可以直接在TS环境下运行

内容的提问来源于stack exchange，提问作者qweezz