redux之connect和provider的简单使用(加上中间件)

首先是src目录结构：

store目录下：

action.js

export const add=()=>({type:'add',data:1});
export const down=()=>({type:'down',data:1});

reducer.js

function reducer(state=0,action){
    switch(action.type){
        case 'add':
            return state+action.data
        case 'down':
            return state-action.data
            default:
        return state
    }
}
export default reducer;

index.js

import reducer from './reducer.js'
import { applyMiddleware, createStore} from 'redux';



var logger = store => next => action => {//中间件
    console.log(next)
    console.log('[action]', action)
    console.log(`[action] type:${action.type} data:${JSON.stringify(action.data)}`)
    next(action)
  
  }


  const store = createStore(
    reducer,
    applyMiddleware(logger)
  )




export default store;

App.js

class App extends Component{
  add=()=>{
    this.props.add()
  }
  down=()=>{
    this.props.down()
  }
  render(){
    
    return (
      <div>
  <div>{this.props.count}</div>
  <button onClick={this.add}>+</button>
  <button onClick={this.down}>-</button>
      </div>
    )
  }
}

export default connect(state=>{
  
  return {count:state}
},{add,down})(App);

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import { Provider } from 'react-redux';
import store from './store/index'

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

render();
store.subscribe(render)