抽離出來

(demo)[https://jsbin.com/noxopeg/edit?html,js,output]

Redux.createStore(fn)
fn(pre的狀態(tài)，要進行的操作){
return current狀態(tài)
}

都是發(fā)布訂閱模式 套層殼

react-redux

index.js依賴

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

狀態(tài)變更邏輯

const reducer = (state, action)=>{
    if(state === undefined){
        return {n: 0}
    }else{
        if(action.type === 'add'){
            return {n: state.n + action.payload}
        }else{
            return state
        }
    }
}

生成store

const store = createStore(reducer)

把store放在render里（得到第一次的界面）(當(dāng)狀態(tài)改變將再次執(zhí)行render)

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

Provider 會將store 傳遞給被它包裹的所有組件

App依賴

import React, { Component } from 'react';
import { connect } from "react-redux";

當(dāng)觸發(fā)onClick（點擊了）

class App extends Component {
    render() {
        return (
            <div>
                你點擊了 <span id="value">{this.props.n}</span> 次
                <div>
                    <button id="add" onClick={ this.props.add.bind(this)}>+1</button>
                 </div>
            </div>
        );
    }
}

這里定義的值可以被子代組件獲取

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

這里定義改變的action (定義事件及改變的值)

function mapDispatchToProps(dispatch) {
    return {
        add1: ()=> dispatch({type:'add', payload: 1})
    }
}
    
如果用對象的形式不需要dispetch  
  mapDispatchToProps：{
     add1:()=>{
      return {type:'add', payload: 1}
    }
  }

將props 傳給App

export default connect(mapStateToProps,mapDispatchToProps)(App);

把mapStateToProps和mapDispatchToProps合并作為props傳遞給App