redux的使用（三）--combineReducers

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的行为定义

1. 以key和value的值进行关联

{
    getStudentList: studentActions.getStudentList,
    addStudent: studentActions.addStudentList,

    getTeacherList1: teacherActions.getTeacherList,
    addTeacherList1: teacherActions.addTeacherList,
}

如
getStudentList为组件中props的行为定义
studentActions.getStudentList为studentActions具体定义的行为