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.