react-redux配合redux-actions使用小例子

一、代码

import React, { Component } from 'react';
import {createStore, bindActionCreators} from 'redux';
import ReactDom from 'react-dom';
import { connect, Provider } from 'react-redux';
import {createAction, handleAction} from 'redux-actions';

const INCREMENT = 'INCREMENT';        //action-type
const increment = createAction(INCREMENT);
//调用increment()返回一个对象{type: 'INCREMENT'}

// const increment = createAction(
//   'INCREMENT',
//   mount => mount,
//   () => ({admin: true})
// )

const defaultState = { count: 1 };

const reducer = handleAction(
  INCREMENT,
  (state, action) => ({
    count: state.count + action.payload
  }),
  defaultState
)

const store = createStore(reducer);

@connect(
  state => ({
    count: state.count
  }),
  {
    increment
  }
)

class App extends Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    let { increment } = this.props;
    increment(1);
    console.log(this.props.count);
  }
  render() {
    return (
      <button>
        <div onClick={this.handleClick.bind(this)}>
          click me!
        </div>
      </button>
    );
  }
}

// function mapStateToProps(state) {
//   return {
//     count: state.count
//   }
// }

// function mapDispatchToProps(dispatch) {
//   return {
//     actions: bindActionCreators({createAction}, dispatch)
//   }
// }

// var AppApp = connect(
//   mapStateToProps,
//   mapDispatchToProps
// )(App);
ReactDom.render(
  <Provider store={store}>
    <App/>
  </Provider> ,
  document.getElementById('root')
)