前面,我们将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.