html 使用React Redux的简单计数器

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用React Redux的简单计数器相关的知识，希望对你有一定的参考价值。

const counter = (state = 0, action) => {
  switch(action.type){
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};
//created a basic counter using redux
const { createStore } = Redux;
// same as 
// var createStore = Redux.createStore; //es5
// import { createStore } from 'redux' //babel import

const store = createStore(counter);
// created a new reducer using pure function counter
// 
// creating a react dom component Counter <Counter />
const Counter = ({ 
  value,
  onIncrement,
  onDecrement
}) => (
  <div>
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>
  <button onClick={onDecrement}>-</button>
  </div>
);

const render = () => {
  ReactDOM.render(<Counter value={store.getState()} 
  onIncrement={() => 
    store.dispatch({
      type : 'INCREMENT'           
    })            
  }
  onDecrement={() => 
    store.dispatch({
      type : 'DECREMENT'           
    })            
  }
  />,
  document.getElementById('root')                
  );

};

store.subscribe(render);
render();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<script src="https://fb.me/react-0.14.0.js"></script>
<script src></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script> 
<script src="https://fb.me/react-dom-0.14.0.js  
"></script>  
  <title>React-Redux First Touch :)</title>
</head>
<body>
  <div id="root"></div>
 
</body>
</html>

以上是关于html 使用React Redux的简单计数器的主要内容，如果未能解决你的问题，请参考以下文章

无法在 Typescript 中调度 redux 操作

React-Native Redux 无法设置状态