Redux

抽离出来

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

Redux.createStore(fn)
fn(pre的状态，要进行的操作){
return current状态
}

都是发布订阅模式 套层壳

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";

状态变更逻辑

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里（得到第一次的界面）(当状态改变将再次执行render)

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

Provider 会将store 传递给被它包裹的所有组件

App依赖

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

当触发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