web-linda / react-redux-learning Goto Github PK

For beginners like me to learn the concepts in Redux

Can it be simpler? send a pull request

To run this example:

1. Download this repo or git clone https://github.com/jackielii/simplest-redux-example.git
2. From the repo folder run:
   npm install
3. npm start
4. open http://localhost:8000/ in the browser

initing index.js is :

import React, { Component, PropTypes } from 'react' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { Provider, connect } from 'react-redux'

// React component class Counter extends Component { render() { const { value, onIncreaseClick } = this.props return (

Counter.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired }

// Action const increaseAction = { type: 'increase' }

// Reducer function counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state } }

// Store const store = createStore(counter)

// Map Redux state to component props function mapStateToProps(state) { return { value: state.count } }

// Map Redux actions to component props function mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch(increaseAction) } }

// Connected Component const App = connect( mapStateToProps, mapDispatchToProps )(Counter)

ReactDOM.render( , document.getElementById('root') )