combineReducers
使用combineReducers解决的目的：
- 1.将reducer函数拆分成多个单独的reducer函数
- 2.拆分后的每个reducer函数负责独立管理state的一部分
- 3.参考链接https://cn.redux.js.org/docs/api/combineReducers.htm
使用说明
- 步骤1.新建单个reducer.js，如student_reducer.js和teacher_reducer.js。具体单个reducer监听响应action的操作，返回handlerActions的对象
- 步骤2.新建一个reducer.js，如index.js。具体操作调用
combineReducers，采用key，value的形式定义一个根reducer，来创建store - 步骤3.修改store.js， 调用
createStoreAPI函数用reducer/index.js - 步骤4.组件中使用，mapStateToProps中调用（
state.students1.student2）赋值给组件的props，其中students1为reducer/index.js中的子reducer（student_reducer.js）的key，student2为student_reducer.js中定义的state的值
步骤一 定义子reducer.js
student_reducer.js文件，export handleActions对象
// reducer/student_reducer.js
import {handleActions} from "redux-actions";
import actionType from "../actionType";
const defaultState = {
students:[{name:'默认',age:0}]
}
export const students = handleActions({
[actionType.GET_STUDENT_LIST]:(state, action)=>{
const students = [{name:'张同学',age:19},{name:'李同学',age:19},{name:'王同学',age:19}]
return {...state, students:students
}
},
[actionType.ADD_STUDENT_LIST]:(state, action)=>{
return {...state, students: [...state.students, action.payload]
}
}
},defaultState)
teacher_reducer.js文件，export handleActions对象
// reducer/teacher_reducer.js
import actionType from "../actionType";
import {handleActions} from "redux-actions";
const defaultState = {
teachers:[{name:'默认', age:0}]
}
export const teachers = handleActions({
[actionType.GET_TEACHER_LIST]:(state, action)=>{
const teachers = [
{name:'张老师',age:32},
{name:'李老师',age:42},
]
return {
...state,
teachers:teachers,
}
},
[actionType.ADD_TEACHER_LIST]:(state, action)=>{
return {
...state,
teachers: [...state.teachers, action.payload]
}
},
}, defaultState)
步骤二 定义出口reducer.js
// reducer/index.js
import {combineReducers} from 'redux'
import {students} from "./student_reducer";
import {teachers} from "./teacher_reducer"
export const reducer = combineReducers({
students,//同名的写法，也可以写成key：value键值对的形式，如下
teachers：teachers,
})
基本使用方法是：
- a.import 子reducer的文件
- b.调用API函数
combineReducers，以key和value的键值对形式进行关联，后期在外部用key进行调用获取对应reducer文件的值 - c. export reducer变量，用于store的关联
步骤三 store的引用
//store.js
import {createStore, applyMiddleware,compose} from 'redux'
import {reducer} from "./reducer/index"
const store = createStore(reducer)
export default store
步骤四 组件中的使用
采用react-reducx定义sotre的state赋值给props，因此关注mapStateToProps中的定义
const mapStateToProps = (state) => {
return {
students: state.students.students,
teachers: state.teachers.teachers,
}
}
export default connect(mapStateToProps, {
getStudentList: studentActions.getStudentList,
addStudent: studentActions.addStudentList,
getTeacherList1: teacherActions.getTeacherList,
addTeacherList1: teacherActions.addTeacherList,
})(App)
- store的state赋值给当前组件的props
1.mapStateToProps以key和value键值对赋值
2.key为组件中的props名
3.value为reducer/index.js中的子reducer的key，如赋值teacher值teachers: state.teachers.teachers,，第一个teacher为组件的props属性名，第二个teachers代表teacher-reducer，理解为调用具体那个reducer，第三个teachers代表teacher-reducer的state值
reducer/index.js
export const reducer = combineReducers({
students,//同名的写法，也可以写成key：value键值对的形式，如下
teachers：teachers,
})
- action的行为定义
- 以key和value的值进行关联
{
getStudentList: studentActions.getStudentList,
addStudent: studentActions.addStudentList,
getTeacherList1: teacherActions.getTeacherList,
addTeacherList1: teacherActions.addTeacherList,
}
如
getStudentList为组件中props的行为定义
studentActions.getStudentList为studentActions具体定义的行为
