react基础使用combineReducers完成对数据的拆分

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模块
  };
};