react与redux

• index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { createStore } from 'redux' //  创建store
import { Provider } from 'react-redux' // 联系react 和redux 
import reducer from './reducer' //已经写好的reducer
import 'antd/dist/antd.css'

const store = createStore(
  reducer,  //  redux中的store
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),  //能在reduxTools中看到state, 也就是说在浏览器中看到reducer
)

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

• App.js

import React, { Component } from 'react'
import PropTypes from 'prop-type'
import { Button } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as indexAction from './action'


class App extends Component {
  increment = () => {
    const { getIncrement } = this.props
    getIncrement()
  }
  decrement = () => {
    const { getDecrement } = this.props
    getDecrement()
  }
  clean = () => {
    const { getClean } = this.props
    getClean()
  }
  changeReducer = () => {
    const { getObjTest } = this.props
    getObjTest()
  }
  changeReducerKey = () => {
    const { getObjTest2 } = this.props
    getObjTest2('123')
  }
  render() {
    const { numbers, objTest } = this.props
    const { atest, btest } = objTest.toJS()
    return (
      <div>
        <br />
        <Button onClick={this.increment}>increment</Button>
        <br />
        <br />
        <Button onClick={this.decrement}>decrement</Button>
        <br />
        <br />
        <Button onClick={this.clean}>clean</Button>
        <br />
        <p
          style={{
            fontSize: '30px',
            fontWeight: 'blod',
          }}
        >{numbers}
        </p>
        <br />
        <br />
        <br />
        <p
          style={{
            fontSize: '30px',
            fontWeight: 'blod',
          }}
        >{atest} +++ {btest}
        </p>
        <Button onClick={this.changeReducer}>btnChangeReducer</Button>
        <Button onClick={this.changeReducerKey}>btnChangeReducerKey</Button>
      </div>
    )
  }
}

App.propTypes = {
  numbers: PropTypes.number,
  objTest: PropTypes.object,
  getIncrement: PropTypes.func,
  getDecrement: PropTypes.func,
  getClean: PropTypes.func,
  getObjTest: PropTypes.func,
  getObjTest2: PropTypes.func,
}

const mapStateToProps = state => ({
  numbers: state.incrementReducer,
  objTest: state.objTest,
})

const mapDispatchToProps = dispatch => ({
  getIncrement: bindActionCreators(indexAction.increment, dispatch),
  getDecrement: bindActionCreators(indexAction.decrement, dispatch),
  getClean: bindActionCreators(indexAction.clean, dispatch),
  getObjTest: bindActionCreators(indexAction.objTest, dispatch),
  getObjTest2: bindActionCreators(indexAction.objTest2, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

• action/index.js

export const INCREMENT = 'INCREMENT'
export function increment() {
  return {
    type: INCREMENT,
  }
}

export const DECREMENT = 'DECREMENT'

export function decrement() {
  return {
    type: DECREMENT,
  }
}

export const CLEAN = 'CLEAN'

export function clean() {
  return {
    type: CLEAN,
  }
}

export const OBJ_TEST = 'OBJ_TEST'
export function objTest() {
  return {
    type: OBJ_TEST,
  }
}

export const OBJ_TEST_CHANGE_KEY = 'OBJ_TEST_CHANGE_KEY'
export function objTest2(text) {
  return {
    type: OBJ_TEST_CHANGE_KEY,
    text,
  }
}

• reducer/index.js

import { combineReducers } from 'redux'
import Immutable, { Map } from 'immutable'
import { INCREMENT, CLEAN, DECREMENT, OBJ_TEST, OBJ_TEST_CHANGE_KEY } from '../action'

const incrementReducer = (state = 1, { type }) => {
  switch (type) {
    case INCREMENT:
      state += 1
      if (state === 10) {
        return state = 20
      }
      return state
    case DECREMENT:
      if (state === 20) {
        state = 10
      }
      state -= 1
      return state
    case CLEAN:
      return state = 0
    default:
      return state = 0
  }
}

const data = Map({
  atest: 'a.test',
  btest: 'b.test',
})
const objTest = (state = data, { type, text }) => {
  switch (type) {
    case OBJ_TEST:
      state = Immutable.fromJS({
        atest: 'aa.test',
        btest: 'bb.test',
      })
      return state
    case OBJ_TEST_CHANGE_KEY:
      return state.set('btest', text)
    default:
      return state
  }
}

export default combineReducers({
  incrementReducer,
  objTest,
})