標籤：
Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.
<html><head> <meta charset="utf-8"> <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> <script src="https://fb.me/react-0.14.0.js"></script> <script src="https://fb.me/react-dom-0.14.0.js"></script></head><body> <div id=‘root‘></div></body></html>
const counter = (state = 0, action) => { switch (action.type) { case ‘INCREMENT‘: return state + 1; case ‘DECREMENT‘: return state - 1; default: return state; }} const Counter = ({ value, onIncrement, onDecrement}) => ( <div> <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> </div>);const { createStore } = Redux;const store = createStore(counter);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();
From React 0.14, you can declear a compoment by using a function.
[Reduc] React Counter Example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
