一个超级简单的demo带你走进redux的大坑

先上代码

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 {count, plus, minus} = this.props;
        return (
            <div>
                <button onClick={minus}>-</button>
                <p>{count}</p>
                <button onClick={plus}>+</button>
            </div>
        )
    }
}



//action
const plusAcion = {
    type: 'PLUS',
    count: 10
}

const minusAction = {
    type: 'MINUS',
    count: 20
}

//reducer
const initialState = {
    count: 0
}
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'PLUS' :
            return {
                count: state.count + action.count
            }
        case 'MINUS' :
            return {
                count: state.count - action.count
            }
        default:
            return initialState;
    }
}

//store
let store = createStore(reducer)

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

//映射Redux actions到组件的属性
function mapDispatchToProps(dispatch){
    return{
        plus:()=>dispatch(plusAcion),
        minus:()=>dispatch(minusAction)
    }
}

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

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

 数据变动的流程

用户在界面上点击加号或者减号

通过点击的那个函数在mapDispatchToProps映射上找到对于的action

然后action就去找组件绑定的store

store对应着reducer

reducer执行当前type对应的那个switch，更改state上面的数据

数据通过mapStateToProps映射到了组件上