记一次React_Redux的操作

最新推荐文章于 2024-09-11 09:19:49 发布

原创最新推荐文章于 2024-09-11 09:19:49 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用React创建组件，并通过Redux进行状态管理。包括组件的定义、属性的使用，以及通过dispatch触发状态更新的过程。

MyComponent

import React, {Component} from 'react';

export default class MyComponent extends Component {
    render() {
        return (
            <div>
                <p>{this.props.count}</p>
                <button onClick={this.props.add}>加一</button>
                <button onClick={this.props.substract}>减一</button>
                <button onClick={this.props.toZero}>置零</button>
            </div>
        );
    }
}

reducer

function reducer(state={
    count:10
},action) {
    switch (action.type) {
        case 'add':
            return {
                ...state,
                count: state.count+1
            }
        case 'substract':
            return {
                ...state,
                count: state.count-1
            }
        case 'toZero':
            return {
                ...state,
                count: 0
            }
        default:
            return state
    }
}

export default reducer;

App

//state/props
import myComponent from "./myComponent";
import {connect} from 'react-redux'

function mapStateToProps(state) {
    return{
        count:state.count
    }
}

//function
function mapDispatchToProps(dispatch) {
    return{
        add:()=>dispatch({
           type:'add'
        }),
        substract:()=>dispatch({
            type:'substract'
        }),
        toZero:()=>dispatch({
            type:'toZero'
        })
    }
}


//connect  联系在一起的语法
const App = connect(mapStateToProps,mapDispatchToProps)(myComponent)

export default App

index

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from "react-redux";
import {createStore} from "redux";
import reducer from "./reducer";


//创造store工厂
const store = createStore(reducer)

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