redux和react-redux初尝试

最新推荐文章于 2025-06-19 14:39:21 发布

原创最新推荐文章于 2025-06-19 14:39:21 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-redux #redux

React点滴知识专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用React和Redux实现的简单计数器应用程序。文章详细展示了如何创建组件、定义Props类型、设置Actions和Reducers，并通过Redux进行状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React,{Component} from 'react';
import PropType from 'prop-types';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';

class Counter extends Component{
    render(){
        const {value, onIncreaseClick} = this.props;
        return(
            <div>
                <span>{value}</span>
                <button onClick={onIncreaseClick}>Increase</button>
            </div>
        )
    }
}

//定义类型
Counter.propTypes = {
    value: PropType.number.isRequired,
    onIncreaseClick: PropType.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);

//映射state到组件的props
function mapStateToProps(state){
    return{
        value:state.count
    }
}
//映射actions到组件的props
function mapDispatchToProps(dispatch){
    return{
        onIncreaseClick: () => dispatch(increaseAction)
    }
}
//把state和action塞到redux容器
const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

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