index.redux.js:

const ADD_GUN = '加机关枪';
const REMOVE_GUN = '减机关枪';


//reducer
export function counter(state=0,action){
    switch(action.type){
        case ADD_GUN:
            return state+1
        case REMOVE_GUN:
            return state-1
        default:
            return 10        
    }
}

//action creator
export function addGun(){
    return {type:ADD_GUN}
}
export function removeGun(){
    return {type:REMOVE_GUN}
}

App.js:

import React from "react";
import { Button } from 'antd-mobile';


class App extends React.Component{
   render(){
       const store = this.props.store;
       const addGun = this.props.addGun;
       const removeGun = this.props.removeGun;
       const addGunAsync = this.props.addGunAsync;
       const num = store.getState();
       return (
           <div>
               <h1>现在有{num}</h1>
               <Button onClick={()=>store.dispatch(addGun())}>加一把</Button>
               <Button onClick={()=>store.dispatch(removeGun())}>减一把</Button>
               <Button onClick={()=>store.dispatch(addGunAsync())}>异步加一把</Button>
           </div>
       )
   }
}

export default App;

index.js

import React from 'react';
import ReactDom from 'react-dom';
import {createStore, applyMiddleware,compose} from 'redux';
import thunk from 'redux-thunk'
import App from './App';
import {counter,addGun,removeGun,addGunAsync} from './index.redux';

//用来配置调试redux工具用
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():f=>f;
//处理中间件applyMiddleware，组合函数用的compose
const store =  createStore(counter,compose(applyMiddleware(thunk),reduxDevtools));
function render(){
    ReactDom.render(<App store={store} addGun={addGun} removeGun={removeGun} addGunAsync={addGunAsync}/>,document.getElementById('root'))
}    
render();

store.subscribe(render)

项目结构

123.png