最简单的React和Redux整合的例子

最新推荐文章于 2024-07-25 22:29:58 发布

黑虎含珠

最新推荐文章于 2024-07-25 22:29:58 发布

阅读量1.4w

点赞数 11

本文链接：https://blog.csdn.net/chenhaifeng2016/article/details/66475364

版权

安装create-react-app
npm install -g create-react-app

创建项目
create-react-app reactreduxrouterdemo
cd reactreduxrouterdemo
安装第三方模块
npm install --save redux
npm install --save react-redux
npm install --save react-router

修改index.js

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


//定义组件
class App extends Component{
    render() {
        const {text, onChangeText, onButtonClick} = this.props;
        return (
            <div>
                <h1 onClick={onChangeText}> {text} </h1>
                <button onClick={onButtonClick}>click me</button>
            </div>
        );
    }
}


//action
const changeTextAction = {
        type:'CHANGE_TEXT'
}
const buttonClickAction = {
        type:'BUTTON_CLICK'
}


//reducer
const initialState = {
    text: 'Hello'
}
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_TEXT':
            return {
                text: state.text=='Hello' ? 'world':'Hello'
            }
        case 'BUTTON_CLICK':
            return {
                text: 'Hello world'
            }
        default:
            return initialState;
    }
}

//store
let store = createStore(reducer);

//映射Redux state到组件的属性
function mapStateToProps(state) {
    return { text: state.text }
}

//映射Redux actions到组件的属性
function mapDispatchToProps(dispatch){
    return{
        onButtonClick:()=>dispatch(buttonClickAction),
        onChangeText:()=>dispatch(changeTextAction)
    }
}

//连接组件
App = connect(mapStateToProps, mapDispatchToProps)(App)

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

这个例子大概是最简单的了，而且每一步注释都非常清楚了。
运行工程npm start