redux

话不多说直接上代码

//  store.js

// 生成store这个对象的
import {createStore} from 'redux'
//creaeStore这个方法的参数必须是一个函数，这个函数我们叫reductor，且有俩个参数 state和action
var store=createStore(function(state=10,action){
    console.log(action)
    switch(action.type){
        case 'ADD':
            return state+action.payload
        case 'JIAN':
            return state-action.payload
        default:
            return state
    }
    //必须返回一个新的state值
})

export default store

//  App.js

import React from 'react';
import './App.css';
import store from './Redux/store'
class App extends React.Component{
  constructor(props){
    super(props)
    this.fn=this.fn.bind(this)
  }
  render(){
    return(
      <div>
        <button onClick={this.fn}>+</button>
        <div>{store.getState()}</div>
      </div>
    )
  }
  fn(){
    store.dispatch({type:'ADD',payload:5})
  }
}

export default App;

//   index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './Redux/store'
ReactDOM.render(<App />, document.getElementById('root'));
//store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
store.subscribe(function(){
    ReactDOM.render(<App />, document.getElementById('root'));
});
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();