美文网首页
redux之combineReducers使用介绍

redux之combineReducers使用介绍

作者: 景元合 | 来源:发表于2019-08-26 15:09 被阅读0次

前言

redux的combineReducers()可以方便的将redux的reducer拆分为各个小的reducer文件,统一调用各个子reducer,方便统一管理。

组件下reducer文件

header/store/reducer.js

const defaultState={
    focused:false
}
export default (state=defaultState,action)=>{
    switch(action.type){
        case 'search_focus':
            return{
                focused:true
            }
        case 'search_blur':
            return{
                focused:false
            }
         default:
             return state       
    }
}

总的reducer.js文件引入组件的reducer.js

store/reducer.js

import {combineReducers} from 'redux'
import headerReducer from '../common/header/store/reducer'
export default combineReducers({
    header:headerReducer
})

header为state的属性名,可以随意定义,headerReducer即是咱们需要引入的子reducer,这样就可以在总的reducer文件下引用各个组建的reducer,最后产生一个整体的 Reducer 函数。需要注意的是,引用state时候,需要引用state对应属性名下的state数据。

const mapStateToProps=(state)=>{
    return{
        focused:state.header.focused
    }
}

相关文章

网友评论

      本文标题:redux之combineReducers使用介绍

      本文链接:https://www.haomeiwen.com/subject/ylzrectx.html