redux计数器

使用react实现 计数器的代码
参考阮一峰大神redux地址

import { createStore, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import thunkMiddleware from 'redux-thunk';

// action type
const INCREASE_COUNT = 'INCREASE_COUNT';
const DECREASE_COUNT = 'DECREASE_COUNT';

// action creator
const increaseCount = () => ({
  type: INCREASE_COUNT
});
const decreaseCount = () => ({
  type: DECREASE_COUNT
});
const increaseCountAsync = () => dispatch => {
  setTimeout(() => {
    dispatch(increaseCount());
  }, 1000);
};

// reducer
const reducer = (state = 0, action) => {
  switch (action.type) {
    case INCREASE_COUNT: return ++state;
    case DECREASE_COUNT: return --state;
    default: return state;
  }
};

// store
const store = createStore(reducer, applyMiddleware(thunkMiddleware));

// view
const Counter = ({ count, dispatch }) => (
    <div>
    <button onClick={() => dispatch(increaseCount())}>+</button>
    <button onClick={() => dispatch(decreaseCount())}>-</button>
    <button onClick={() => dispatch(increaseCountAsync())}>Increase Async</button>
    <div>{count}</div>
  </div>
);

// container
const mapStateToProps = state => ({ count: state });
const CounterContainer = connect(mapStateToProps)(Counter);

// connect to store
const App = (
    <Provider store={store}>
    <CounterContainer />
  </Provider>
);

ReactDOM.render(App, mountNode);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值