【React】React状态管理redux React中Dispatch

action 概念和用法

action 描述事件的发生，text 是调用者传递的参数

本例在 actions/index.jsx 代码, 其实是一个普通的函数,描述了一个ADD_USER事件,接收一个text参数
白话描述: 现在告诉你发起一个 ADD_USER 操作,传递给你text参数

export const addUser= text => {
	return {type: 'ADD_USER', user:text}
}

export const addUser= text => {
	return {
		type: 'ADD_USER',
		user:text
	}
}

dispatch 概念和用法

dispatch 用来派发 action 的事件描述 ,dispatch 将action的事件描述传递给 Reducers

白话描述: 有一个人需要新增一个用户操作,并且给出参数 {name:'zhangsan',sex:'男',age:18} ,你们Reducers 谁来处理

本例中 containers/AddUser.jsx 代码, addUser(val) 是一个普通action方法调用,传递了val参数,得到一个事件描述 ,这个描述其实也是一个普通的JavaScript对象(参考下面派发给Reducers 的数据格式)

return {
	handSubmit: (val) => {
		dispatch(addUser(val))
	}
}

dispatch 派发了这个事件描述, 如果 val的值是

 { "name": "zhangsan", "sex": "男",  "age": "18"  }

最终派发给 Reducers 的事件描述就是:

{  
	"type": "ADD_USER", 
	"user": { "name": "zhangsan", "sex": "男",  "age": "18"  }
}

Reducer概念和用法

Reducer 指定了如何响应 actions 的事件描述,更新state

本例中 reducers/updateUserList.jsx 代码, updateUserList 接收state和 action 参数,根据action更新旧的sate

action 参数就是通过 dispatch 派发过来的事件描述 , 内容和上面传过来的一样:

{ "type": "ADD_USER", "user": { "name": "zhangsan", "sex": "男", "age": "18" } }

state参数 是旧的数据

const updateUserList = (state=[] , action) => {
    switch (action.type) {
        case 'ADD_USER':
            return [ ...state, {name: action.user.name, sex: action.user.sex, age: action.user.age}]
        default:
            return state
    }
}

reducer 更新的state 会被组件容器监听到,然后传递给展示组件

containers容器组件

描述如何运行(数据获取、状态更新)

本例中 containers/AddUser.jsx 代码, 容器组件和展示组件的属性做一个映射, 容器组件会监听到 Redux state 的变化,提供给展示组件

mapStateToProps 映射属性
mapDispatchToProps 映射函数

// mapStateToProps 将更新后的状态数据传递给展现组件，本例中会将 buttonName 传递给展示组件
// state:  state参数接收通过 reducer 变更过后的数据
// state.setButtonName  其实就是获取了变更后的数据
const mapStateToProps = state => {
	return {
		buttonName:state.setButtonName
	}
}
// mapDispatchToProps 将handSubmit函数传递给展示组件
const mapDispatchToProps= dispatch   => {
	return {       
		handSubmit: (val) => { 
			dispatch(addUser(val))   
		}   
	}
};
// 将容器和展示组件关联起来
const AddUserForm = connect(mapStateToProps, mapDispatchToProps)(SearchForm)
export default AddUserForm

components展示组件

描述如何展现(骨架、样式)

容器映射的参数会通过 props 传递过来, {props.buttonName} 就是获取容器传过来的按钮名称

const SearchForm = ( props ) => {
    let input1, input2,  input3 ;    
    return (        
        { 
            e.preventDefault(); 
            if (!input1.value.trim()) { return } 
            props.handSubmit({ name:input1.value, sex:input2.value, age:input3.value,} ) ; 
            input1.value = ''; input2.value = ''; input3.value = '';
        }
        姓名: { input1 = node }} type='text'/> 
        性别: { input2 = node }} type='text'/> 
        年龄: { input3 = node }} type='text'/>
        {props.buttonName}
    )
}
export default SearchForm