For beginners like me to learn the concepts in Redux
Can it be simpler? send a pull request
To run this example:
- Download this repo or
git clone https://github.com/jackielii/simplest-redux-example.git
- From the repo folder run:
npm install
npm start
- 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') )