使用combineReducers 完成对数据的拆分管理

前面,我们将focused 属性放置在redux 中了。但是现在在浏览器中调试窗口看redux 的信息,还看不到,我们还需要做一些设置。

我们可以在github 上搜索redux-devtools-extension 如下

这个就是我们要的插件(它不需要安装)。

github 的文档,往下翻,会找到它的使用方法,如下,是一部分。

按照官网的写法,我们去src/store 下,找到 index.js,做下面的修改。

import { createStore, compose } from 'redux';
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers());

export default store;

这样,调试窗口的 Redux 窗口就可以正常debug 了。

好啦。我们目前所有的redux 的数据 和 关于数据的操作,都放在了 reducer.js 中,当项目很大时,reducer 就会变得很难维护了。下面,我们要把reducer.js 中的功能进行拆分。

Redux 给我们提供了一个方法:combineReducers 。它可以把一个大的reducer 拆成很多小的reducer 来进行管理。

那具体的操作呢,我们可以在一个组件里面建立一个这个组件关系的 reducer。

我们在 src/comment/header 下,创建一个目录 store,再往这个store 目录下,创建一个文件 reducer.js。

由于 focused 属性,是Header 组件关心的,其它组件不关心。我们把原来 src/store/reducer.js 中的代码剪切过来。src/comment/header/store 下的 reducer.js 代码如下。

const defaultState = {
    focused: false
};

export default (state = defaultState, action) => {
    if (action.type === "search_focus") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = true;
        return newState;
    }
    if (action.type === "search_blur") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = false;
        return newState;
    }
    return state;
}

然后呢,src/store 下的reducer ,要去整合所有的小 reducer。src/store 下的reducer 代码如下。

import { combineReducers } from 'redux';
import headerReducer from '../common/header/store/reducer';

export default combineReducers({
    header: headerReducer
});

现在,貌似是可以得了。但是在页面测试,会发现,原来焦点事件,样式都没有了。这是因为,我们通过combineReducers 方法将reducer 拆分后,新的store 变成了这样:

所以,我们在Header 组件中接受state 参数的时候,要改成下面这样。

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

最后,我们会发现在 src/store 下的reducer 中,小reducer 的地址非常长。那么,我们可以这样做。在src/common/header/store目录下,创建一个文件index.js ,代码如下。

import reducer from './reducer';

export { reducer };

然后  src/store 下的reducer 就可以改成如下。

import { combineReducers } from 'redux';
import { reducer as headerReducer } from '../common/header/store';

const reducer = combineReducers({
    header: headerReducer
});

export default reducer;

Done.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值