react&&redux&&react-redux

create-react-app newRedux

• index.js

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App'
import reducer from './reducer'

const store = createStore(
    reducer,
    window.devToolsExtension ? window.devToolsExtension() : f => f
)

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

• App.js

import React, { Component } from 'react'
import { Select, Button } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as indexActin from './action'

const Option = Select.Option

class App extends Component {
  increment = () => {
    const { getIncrement } = this.props
    getIncrement()
  }
  render() {
    const { increment } = this.props
    return (
      <div>
        {increment}
        <Button onClick={this.increment}>btn</Button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  increment: state.increment
})
const mapDispatchToProps = (dispatch) => ({
  getIncrement: bindActionCreators(indexActin.increment, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

• action/index.js

export const INCREMENT = 'INCREMENT'

export function increment() {
  return {
    type: INCREMENT
  }
}

• reducer/index.js

import { combineReducers } from 'redux'
import { INCREMENT } from '../action'

function increment(store=0, { type }) {
  switch (type) {
    case INCREMENT:
      return store + 1
    default:
      return store
  }
}

export default combineReducers({
  increment
})