redux就是一个数据管理工具
- action ---数据层，公共约定
- reducer --根据dispatch发布更新处理action数据，建议返回新state。
- store ---1 dispatch发布事件，2getState()获取stage，3subscribe监听触发
事件 参考例子 git>https://github.com/mazhenxiao/ProcessTimeLine.git
redux 简单实例
import { createStore } from 'redux';
//action 实例，就是一个数据结构约定，type为该数据识别码
let db = {
"type":"storeIndex",
"data":{
"list":[],
"show":true
}
}
//reducer实例，处理触发器触发后如何返回数据。
let reducer=(state=db,action)=>{
let {data,type} = action;
if(type=="storeIndex"){
return Object.assign({},state,action) //建议返回新对象不直接改初始对象
}
return state;
}
//store实例，绑定reduce
let store = createStore(reducer);
//store监听实例，类似dom层addEventlistener
store.subscribe(() =>
//store.getState()，返回reducer处理过的数据
console.log(store.getState())
);
//store.dispatch 发布实例
store.dispatch({
"type":"storeIndex",
"data":{
"list":[1,2,3,4,5,6],
"show":true
}
})
export default store
react-redux，我不苟同但是开发只能随大溜，公共约定。
- <Provider store={store}> 组件
- connect 绑定组件
react-redux 实例
1、Provider 组件绑定
import React,{Component} from "react";
import {Provider} from "react-redux";
import { BrowserRouter as Router,Route} from 'react-router-dom';
import store from "@js/redux";
import ViewIndex from "@view/index";
class Prouter extends Component{
render(){
return <Provider store={store}> //store 参照redux生成
<Router>
<Route exact path="/" component={ViewIndex} />
</Router>
</Provider>
}
}
export default Prouter
2、connect 绑定组件，注入redux的action到组件的props，也是关键步骤，并且蹩脚。
以高阶函数绑定当前组件
- mapStateToProps: 相当于过滤filter，返回当前项目所需action
- mapDispatchToProps: 在props里注入一个函数，并给函数注入参数dispatch，用来发布更新action，此处实例我自定义了个onLoad在componentDidMount中执行，并将dispatch 提取出来在当前类使用。
import React, { Component } from "react";
import controllerIndex from "./controller-index";
import actionIndex from "./action-index";
import {connect} from "react-redux";
class VIewIndex extends Component{
constructor(props, context){
super(props, context);
this.dispatch=null;
}
componentDidMount(){
this.props.onLoad(dispatch=>this.dispatch=dispatch);
}
Event_Click_Getstate(event){
this.dispatch({
type:"storeIndex",
data:{
list:[{
startTime:"1234123"
}]
}
})
}
render(){
let {storeIndex} = this.props
return <article onClick={this.Event_Click_Getstate.bind(this)}>
{
storeIndex.data.list.map((da,ind)=>{
return <p key={ind}>{da.startTime}</p>
})
}
</article>
}
}
//过滤当前所需action
const mapStateToProps=(state)=>{
return {storeIndex:state.storeIndex}
}
// 在props里注入自定义函数，为了返回dispatch用来发布action
const mapDispatchToProps=(dispatch)=>{
return {
onLoad(callback){ callback(dispatch) }
}
}
//此处为关键所在
export default connect(mapStateToProps,mapDispatchToProps)(VIewIndex);
源码解析
一直吐槽为神马不直接注入到组件，还得去高阶嵌套，于是翻阅react-redux到Provider，发现他只是如实中转了store
class Provider extends Component {
getChildContext() {
return { [storeKey]: this[storeKey], [subscriptionKey]: null }
}
constructor(props, context) {
super(props, context)
this[storeKey] = props.store;
}
render() {
return Children.only(this.props.children)
}
}
既然已经开始处理子元素了，为什么不直接向下逐层添加props，于是我就尝试去添加，发现报错，于是翻开react源码找原因,发现竟然冻结了子元素的props属性Object.freeze(childArray); 所以无法直接逐层注入，否则使用react.Children.map 方法可以逐一或递归注入到props里
// Children can be more than one argument, and those are transferred onto
// the newly allocated props object.
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
{
if (Object.freeze) {
Object.freeze(childArray);
}
}
props.children = childArray;
}
connect 事件发布mapDispatchToProps,使用了recux的bindActionCreators 方法绑定函数并传入dispatch作为参数
export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps, dispatch))
: undefined
}
网友评论