react-redux 配合ramda实现计数器

原文链接: react-redux 配合ramda实现计数器

上一篇: react router 学习过程中用组件切换代替新建项目

下一篇: redux 使用redux-thunk把switch从代码里踢出去

https://react-redux.js.org/

安装

yarn add react-redux

配合ramda实现的计数器

import React from "react";
import { createStore } from "redux";
import { Provider, useSelector } from "react-redux";
import km from "keymirror";
import * as R from "ramda";

const ACTION_TYPES = km({
  INC: null,
  DEC: null,
  RESET: null,
  INC_DOUBLE: null,
});

const initState = {
  count: 0,
};

const reducer = (state = initState, action, pyload) => {
  switch (action.type) {
    case ACTION_TYPES.INC:
      return R.evolve({ count: R.inc }, state);
    case ACTION_TYPES.DEC:
      return R.evolve({ count: R.dec }, state);
    case ACTION_TYPES.INC_DOUBLE:
      return R.evolve({ count: R.add(action.dx) }, state);
    default:
      return state;
  }
};

const store = createStore(reducer, initState);

const Counter = () => {
  const inc = () => {
    store.dispatch({ type: ACTION_TYPES.INC, dx: 1 });
  };
  const dec = () => {
    store.dispatch({ type: ACTION_TYPES.DEC, dx: 1 });
  };

  const incDouble = () => {
    store.dispatch({ type: ACTION_TYPES.INC_DOUBLE, dx: 2 });
  };
  const count = useSelector(R.path(["count"]));

  return (
    <div>
      <div>count:{count}</div>
      <button onClick={inc}>inc</button>
      <button onClick={dec}>dec</button>
      <button onClick={incDouble}>incDouble</button>
    </div>
  );
};
export default () => {
  return (
    <Provider store={store}>
      <Counter></Counter>
    </Provider>
  );
};