redux-项目中使用案例（二）

1. index.js

import React from "react";
import ReactDOM from "react-dom";
import thunk from "redux-thunk";
import {Provider} from "react-redux";
import App from "./App";
import { createStore,applyMiddleware,compose } from "redux";
import { counter} from "./index-redux";
const reduxDevtools=window.devToolsExtension?window.devToolsExtension():(f=>f);//用于redux-tools监听

const store = createStore(counter,compose(
  applyMiddleware(thunk),reduxDevtools
  ));
  ReactDOM.render(
    <Provider store={store}>
    <App />
    </Provider>,
    document.getElementById("root")
  );

2. App.js

import React from 'react'
import { connect } from 'react-redux'
import { add, minus, delayAdd} from './index-redux'
class App extends React.Component{
  render(){
    const {add,minus,delayAdd}=this.props;//集成与connect下的方法
    return (
      <div>
        <h2>数值：{this.props.num}</h2>
        <button onClick={add}>增加</button>
        <button onClick={removeGun}>减少</button>
        <button onClick={addGunAsync}>延迟增加</button>
      </div>
    ) 
  }
}
App=connect( {num:state},{ add, minus,  delayAdd})(App)
export default App;

3. index-redux

// 这就是reducer处理函数，参数是状态和新的action
export function counter(state=0, action) {
  // let state = state||0
  switch (action.type) {
    case "add":
      return state + 1
    case "minus":
      return state - 1
    default:
      return 10
  }
}
export function addGun(){
  return { type: "add" }
}
export function removeGun(){
  return { type: "minus" }
}
// 延迟添加，拖两天再给
export function delayAdd(){
  // thunk插件的作用，这里可以返回函数，
  return dispatch => {
    setTimeout(() => {
      // 异步结束后，手动执行dispatch
      dispatch(addGun());
    }, 2000);
  };

}