Redux基本用法

pureSnow_code

已于 2025-03-01 11:05:26 修改

阅读量159

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

于 2025-03-01 11:04:41 首次发布

本文链接：https://blog.youkuaiyun.com/pureSnow_code/article/details/145944693

import {createStore} from 'redux';
import {Provider, useDispatch, useSelector} from 'react-redux';

const initialState = {count: 0};

function reducer(state = initialState, action){
    switch(action.increment){
        case 'increment':
            return {count: state.count+1};
        default:
            return state;
    }
}

const store = createStore(reducer);

// 组件
function Counter(){
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();
    
    return {
        <div>
            <div>Count: {count}</div>
            <button onClick={() => {dispatch({type:'increment'})}}>+</button>
        </div>
    };
}

function APP(){
    return (
        <Provider>
            <Counter/>
        </Provider>
    );
}

export default App;