zoukankan      html  css  js  c++  java
  • react-redux: counter

    store:

    import {createStore,applyMiddleware, compose} from "redux";
    import thunk from "redux-thunk";
    import rootReducer from "./reducers/rootReducer";
    
    const middlewares = [
        applyMiddleware(thunk)
    ];
    const store = initialState => createStore(rootReducer, initialState, compose(...middlewares));
    
    export default store;

    rootReducer:

    import {combineReducers} from "redux";
    import {reducer as toastr} from "react-redux-toastr";
    
    const rootReducer = combineReducers({
        toastr,
        counterReducer
    });
    
    export default rootReducer;

    counterReducer:

    import * as types from "../actions/actionType";
    
    const initialState = {
       count: 0
    };
    
    const counterReducer = function (state = initialState, action) {
        const count = state.product;
        switch (action.type) {
            case types.INCREMENT:
                return {count: count + 1};
            case types.DECREMENT:
                return {count: count - 1};
            default:
                return state;
                
        }
        
    };
    
    export default counterReducer;

    actionType:

    export const INCREMENT = 'INCREMENT';
    export const DECREMENT = 'DECREMENT';

    Counter:

    import {connect} from "react-redux";
    import * as types from "actions/actionType";
    
    const mapStatetoProps = state =>{
        return {
            value: state.counterReducer.count
        }
    }
    const mapDispatchToProps =dispatch => {
        return {
            onIncrement: ()=>dispatch({type: types.INCREMENT}),
            onDecrement: ()=>dispatch({type: types.DECREMENT})
        }
    }
    
    class Counter extends React.Component {
        render() {
            const {count, onIncrement, onDecrement} = this.props;
            return (
                <div>
                    <span>{count}</span>
                    <button onClick={onIncrement}>+</button>
                    <button onClick={onDecrement}>-</button>
                </div>
            )
        }
    }
    const CounterContainer = connect(
        mapStateToProps,
        mapDispatchToProps
    )(Counter)
    export default CounterContainer;

     counterAction:

    import * as types from "./actionType";
    export function increment(count) {
        return {
            type: types.INCREMENT,
            count
        }
    }
    export function decrement(count) {
        return {
            type: types.DECREMENT,
            count
        }
    }
    onIncrement: ()=>dispatch({type: types.INCREMENT}) =》
    onIncrement: (count)=>dispatch(actions.increment(count)),

     use redux-actions:

    import {createAction} from "redux-actions";
    import * as types from "./actionType";
    export const increment = createAction(types.INCREMENT);
    export const decrement = createAction(types.DECREMENT);

    Redux Thunk 中间 件 可以 让 action 创建 函数 先不 返回 action 对象, 而是 返回 一个 函数。 通过 这个 函数 延迟 dispatch 或者 只在 满足 指定 条件 的 情况下 dispatch。 这个 内部 函数 接受 store 的 两个 方法 dispatch 和 getState 作为 参数。

    update action:

    import {createAction} from "redux-actions";
    
    import * as types from "../../constant/ActionType";
    
    export  const increment = createAction(types.INCREMENT);
    export  const decrement = createAction(types.DECREMENT);
    
    export function incrementIfOdd() {
        return (dispatch, getStore) => {
            const count = getStore().CounterReducer.count;
            if (count % 2 ==0) {
                return
            }
            dispatch(increment())
        }
    }

    update container :

    import React from "react";
    import {connect} from "react-redux";
    import {Row, Col, Button} from "antd";
    
    import * as actions from "../../reduxModel/actions/CounterAction";
    import "./index.scss";
    
    const mapStateToProps = state => {
        return {value: state.CounterReducer.count}
    };
    const mapDispatchToProps =  {
        onIncrement: actions.increment,
        onDecrement: actions.decrement,
        onIncrementIfOdd: actions.incrementIfOdd
    };
    
    class Home  extends React.Component{
    
        render() {
            const {value, onIncrement, onDecrement, onIncrementIfOdd} = this.props;
            return (
                <div className="app-home">
                    <div className="app-layout-container">
                        <Row type="flex" justify="center" className="app-layout-body">
                            <Col span={4}>
                                sidebar
                            </Col>
                            <Col span={20} className="page-panel">
                                welcome Home
                                <div className="form-btn-group">
                                    <span>{value}</span>
                                    <Button type="dashed" htmlType="button" onClick={onIncrement}>+</Button>
                                    <Button type="dashed" htmlType="button" onClick={onDecrement}>-</Button>
                                    <Button type="dashed" htmlType="button" onClick={onIncrementIfOdd}>add if odd</Button>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
            )
        }
    }
    const  HomeContainer = connect(
      mapStateToProps,
      mapDispatchToProps
    )(Home);
    
    export default HomeContainer;
  • 相关阅读:
    【转】 java中Class对象详解和类名.class, class.forName(), getClass()区别
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    107. Binary Tree Level Order Traversal II
    109. Convert Sorted List to Binary Search Tree
    108. Convert Sorted Array to Binary Search Tree
    110. Balanced Binary Tree
    STL容器迭代器失效问题讨论
    113. Path Sum II
    112. Path Sum
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/8855757.html
Copyright © 2011-2022 走看看