修改redux中的state/store结构

184 阅读1分钟

combineReducer函数直接决定state结构,state的一级属性名就是对应的reducer函数,问题来了,如果要将reducer函数移到state的二级属性那里,就像这样,要做哪些改动呢?

image-20210816083639405image-20210816083714172
改动前改动后

首当其冲的就是修改combineReducer函数,参考官方教程,不用combineReducer函数时,改动前的reducer函数如下:

 export const reducer = (state: IStoreState = InitialState, action: any): IStoreState => {
     return {
         selectedSubreddit: selectedSubreddit(state.selectedSubreddit, action),
         postsBySubreddit: postsBySubreddit(state.postsBySubreddit, action)
     }
 }

所以,将Reducer函数下一一级属性后,应该这样改:

 export const reducer = (state: IStoreState = InitialState, action: any): IStoreState => {
     return {
         redditAPI: {
             selectedSubreddit: selectedSubreddit(state.redditAPI.selectedSubreddit, action),
             postsBySubreddit: postsBySubreddit(state.redditAPI.postsBySubreddit, action)
         },
     }
 }

回归到combineReducer函数,也可以这样写:

 ​
 export const reducer = combineReducers(
     {
         redditAPI:combineReducers({
             selectedSubreddit,
             postsBySubreddit
         })
     }
 )

除了combineReducer要修改之外,redux其他地方也要小幅改动,主要改动的地方如下:

  1. reducer分函数的接口对象需要成对应的属性值,;
  2. 由于action里面的getState()和container里面的mapStateToProps`函数始终指定的是全局state,这里要修改成对应的属性值