react-react 入门 helloworld 计数器

前端之家收集整理的这篇文章主要介绍了react-react 入门 helloworld 计数器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最简单的一个react-redux 示例,实现点击加一的计数器

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

function reducers(state = 1,action) {
    switch (action.type) {
        case 'ADD':
            return state + action.payload;
        default:
            return state;
    }
};

const store = createStore(reducers)

const ResultIn = (props) => <div>结果:{props.value}</div>

const Result = connect(
    mapStateToPropsResult
)(ResultIn)

var AppIn = (props) => <div onClick={() => {
    props.onChange()
}}>点我加1<Result/></div>

function mapStateToPropsResult(state) {
    return {
        value: state
    }
}

function mapStateToProps(state) {
    return {
        value: state
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onChange: () => dispatch({type: 'ADD',payload: 1})
    }
}

const App = connect(
    mapStateToProps,mapDispatchToProps
)(AppIn)

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,document.getElementById('root')
)

猜你在找的React相关文章