combineReducer将reducer.js拆分为多个小的reducer,便于数据管理
import { combineReducers } from 'redux'
可以在每一个组件下面创建属于自己的store,用来存储自己的数据
在组件的store里面写法和平时一样,只不过index.js可能用于到处文件处理
import reducer from './reducer'
export {
reducer
}
在调用时
// 使用combineReducers来拆分管理组件数据
import { combineReducers } from 'redux'
import { reducer as TodoLayoutReducer } from "../components/TodoLayout/store";
export default combineReducers({
header: TodoLayoutReducer
})
在合并的总的store的reducer.js中的写法
// 使用combineReducers来拆分管理组件数据
import { combineReducers } from 'redux'
import TodoLayoutReducer from '../components/TodoLayout/store/reducer'
export default combineReducers({
header: TodoLayoutReducer
})
inde.js中的写法,和普通写法一样
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk),
)
const store = createStore(reducer, enhancer);
export default store
在调通后,子组件中使用store中的值要加对应模块的名称
可以这样调用
const mapStateToProps = (state, ownProps) => {
// 将state映射到props上
return {
inputValue: state.header.inputValue, // 添加header模块
list: state.header.list, // 添加header模块
};
};