create-react-app mydemo

npm run eject

npm i redux --save

const Add = 'addGirl', Remove = "removeGirl"; export function reducer(state = 0, action) { switch (action.type) { case Add: return state + 1; case Remove: return state - 1; default: return 10; } } //action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错 export function addCreator() { return { type: Add }; } export function removeCreator() { return { type: Remove }; } export function addAsync() { return (dispatch, getState) => { setTimeout(function () { dispatch(addCreator()); }, 1000); } }

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import { createStore } from 'redux'; import thunk from 'redux-thunk'; import { reducer,addCreator,removeCreaator } from './index.redux'; import { Provider } from 'react-redux' const store = createStore(reducer); function render() { ReactDOM.render( , document.getElementById('root') ); } //封装成方法，方便下面的store的订阅调用 render(); //每当dispatch时，订阅的函数就会执行 store.subscribe(render); registerServiceWorker();

import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { var store=this.props.store; var num=store.getState(); return ( 
 
现在有机关枪{this.props.num}把。
  { store.dispatch(this.props.addCreator()) }}>add  { store.dispatch(this.props.removeCreator()) }}>remove 
 ); } } export default App;

npm i react-thunk --save

import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));

export function addAsync() { return (dispatch, getState) => { setTimeout(function () { dispatch(addCreator()); }, 1000); } }

 { store.dispatch(this.props.addAsync()) }}>addAsync