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;