react redux

12 篇文章 0 订阅

在react中使用redux入门。
基本的例子使用redux管理react的状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    const initialState = {
        cart: [
            {
                product: 'bread 700g',
                quantity: 2,
                unitCost: 90
            },
            {
                product: 'milk 500ml',
                quantity: 1,
                unitCost: 47
            }
        ]
        }
    const ADD_TO_CART = 'ADD_TO_CART'

    const renducer = function (state=initialState, action) {
        switch (action.type) {
            case ADD_TO_CART:
                return {
                    ...state,
                    cart:[...state.cart, action.payload],
                }
        
            default:
                return state;
                break;
        }
    }
    const store = Redux.createStore(renducer)
    
    //class声明组件
    class ClassComponent extends React.Component {

        addToCart(product, quantity, unitCost){
            store.dispatch({
                type:ADD_TO_CART,
                payload:{
                    product, quantity, unitCost
                }
            })
        }

        render(){
            return (
                <div>
                    <h1>{this.props.v1}--{store.getState().cart.length}</h1>
                    <button onClick={()=>{this.addToCart('coffee1',1,100)}}>addToCart1</button>
                    <button onClick={()=>{this.addToCart('coffee2',2,200)}}>addToCart2</button>
                </div>
            )
        }
    }

    const render = ()=>{
        ReactDOM.render(
            <div>
                <ClassComponent v1={'hello redux'} />
                <button onClick={()=>{console.log(store.getState())}}>getState</button>
            
            </div>,
            document.getElementById('example')
        );
    }
    render()

    let unsubscribe = store.subscribe(() =>{
        render();
        console.log(store.getState());
    });

    //解除监听
    // unsubscribe();
</script>

</body>
</html>

参考文档:
Redux 入门教程
Redux入门教程(快速上手)

高阶函数connect

接受四个参数:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps

允许我们将store中的数据作为props绑定到组件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}
mapDispatchToProps

将action作为props绑定到组件上。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

mergeProps

不管是stateProps还是dispatchProps,都需要和ownProps merge 之后才会被赋给MyComp。connect的第三个参数就是用来做这件事。通常情况下,你可以不传这个参数,connect就会使用Object.assign替代该方法。

[mergeProps(stateProps, dispatchProps, ownProps): props]
options

基本上也会用到

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值