Skip to content

web-linda/react-redux-learning

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

js-standard-style

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 (

{value} Increase
) } }

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') )

About

simple redux demo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published