react类组件实例

目的：

用react类组件完成一个todolist的demo，巩固最近学习的react的知识点

git地址：

https://github.com/jc5055/ReactDemo

框架介绍

image.png

redux:

redux的由action，reducer，store三部分组成，其中action理解为的行为类型，reducer理解为行为操作，store理解为行为作用的结果，action必须通过reducer才能修改store里面的指

actions：

actions使用APIcreateActions来定义多个action，基本形式[action.type]:(par1)=>{ return par1}

import {createActions} from 'redux-actions'

export default createActions({
    [actionType.GET_ALL_TODO]: () => {
    },
    [actionType.DEL_ONE_TODO]: (todoId) => {
        return todoId
    },
})

reducer

针对不通的行为类型，reducer定义对应的行为操作，实现store存储的属性更新。
定义action中是用来createActions，因此reducer对应配合使用handleActions来完成行为操作的映射。
reducer = handleActions(handlers:{[action.type]:(state, action)=>{retuen}}, defalutState)

export const todoReducer = handleActions({
    [actionType.GET_ALL_TODO]: (state, action) => {...},
    [actionType.ADD_ONE_TODO]: (state, action) => {...},
    [actionType.DEL_ONE_TODO]:  (state, action) => {...},
    [actionType.CHANGE_ONE_TODO]:  (state, action) => {...},
    [actionType.DEL_FINISHED_TODO]:  (state, action) => {...},
    [actionType.IS_CHECKED_ALL_TODO]:  (state, action) => {...},
}, defaultState)

行为类型和行为操作映射：[actionType.GET_ALL_TODO]: (state, action) => {...},
reducer的默认值：defaultState

针对大型项目，reducer对应的行为操作会不断增加，为了让代码有更好的可维护性，将reducer进行分拆，使每个reducer只更新state的部分属性，实现代码的解耦合，具体使用的API函数为combineReducers。

import {combineReducers} from 'redux'
import {todoReducer} from './todoReducer'

export const reducer = combineReducers({
    todoReducer : todoReducer
})

combineReducers:将不通的reducer合并成一个reducer，并作为createStore的传参
todoReducer : todoReducer：采用key：value的形式实现不同的reducer的store的属性值更新。如connec中的mapStateToProps中的属性值声明，具体如

const mapStateToProps = (state) => {
    return {
        todos: state.todoReducer.todos
    }
}

如todos属性只在todoReducer的reducer中定义，因此要使用state.todoReducer.todos才能获取正确的值

store：

理解为数据库，所有的属性都存放在store，只有reducer能够更新store里面存储的值

import {createStore, applyMiddleware, compose} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {reducer} from './reducer/index'
import mySaga from "./sagas";

const sagaMiddleWare = createSagaMiddleware()
const store = createStore(reducer, applyMiddleware(sagaMiddleWare))

sagaMiddleWare.run(mySaga)

export default store

const store = createStore(reducer, applyMiddleware(sagaMiddleWare))，将定义好的reducer传递给API函数createStore，则reducer就与store形成了关联

react-redux

react-redux是在redux基础上应运而生的，通过react-redux 的标签和基础API connect实现store属性变化的实时同步

标签`

标签包裹根标签，使得根标签下的子标签能够完成store属性变化的更新

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

connect

connect的API使用，将store的属性值同步/action派发到控件props。基本用法export default connect(mapStateToProps, mapDispatchToProps)(App);

属性同步mapStateToProps

const mapStateToProps = (state) => {
    return {
        todos: state.todoReducer.todos
    }
}

state:作为箭头函数的传参，表示store里面的存储数据的集合
todos: state.todoReducer.todos:demo采用combineReducers将子reducer进行融合，在使用过程中，todoReducer.todos表示使用reducer的子reducer中的todoReducer的属性todos给当前控件todos进行赋值

action派发mapDispatchToProps

export default connect(mapStateToProps, {
    getAllTodos: actions.getAllTodo,
})(App);

mapDispatchToProps：{getAllTodos: actions.getAllTodo}
getAllTodos:表示映射到当前组件的行为属性
actions.getAllTodo:actions为所有行为，getAllTodo为具体行为。注意demo中使用的是createActionsAPI，通过createActions定义的action，为返回一个行为名，行为名的命名规范是去除下划线后采用驼峰形式。如

 //actionsType.js
const GET_ALL_TODO = 'get_all_todo'

//action.js
 [actionType.GET_ALL_TODO]: () => {},

//则通过action调用对应的action行为名为getAllTodo
export default connect(mapStateToProps, {
    getAllTodos: actions.getAllTodo, //此处
})(App);