redux 中 bindActionCreators 的实现

Question

import React, { Component } from 'react';
import { createStore } from '../redux'
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

let initState = { num: 0 }
function reducer(state = initState, action) {
  switch (action.type) {
    case INCREMENT:
      return { num: state.num + 1 }
    case DECREMENT:
      return { num: state.num - 1 }
    default:
      return state
  }
}

let store = createStore(reducer)

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: store.getState().num
    }
  }
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.setState({ num: store.getState().num })
    })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  handleClick = () => {
    store.dispatch({ type: INCREMENT })
  }

  render() {
    return (
      <div>
        <p>{this.state.num}</p>
        <button onClick={this.handleClick}>
          +
        </button>
      </div>
    );
  }
}

export default Counter;

派发动作

import React, { Component } from 'react';
import { createStore } from '../redux'
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

let initState = { num: 0 }
function reducer(state = initState, action) {
  switch (action.type) {
    case INCREMENT:
      return { num: state.num + 1 }
    case DECREMENT:
      return { num: state.num - 1 }
    default:
      return state
  }
}

let store = createStore(reducer)

let actions = {
  increment() {
    return store.dispatch({ type: INCREMENT })
  },
  decrement() {
    return store.dispatch({ type: DECREMENT })
  }
}

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: store.getState().num
    }
  }
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.setState({ num: store.getState().num })
    })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  handleClick = () => {
    actions.increment()
  }

  render() {
    return (
      <div>
        <p>{this.state.num}</p>
        <button onClick={this.handleClick}>
          +
        </button>
      </div>
    );
  }
}

export default Counter;

绑定 action 的创建者

import React, { Component } from 'react';
import { createStore } from '../redux'
// import { bindActionCreators } from 'redux';
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

let initState = { num: 0 }
function reducer(state = initState, action) {
  switch (action.type) {
    case INCREMENT:
      return { num: state.num + 1 }
    case DECREMENT:
      return { num: state.num - 1 }
    default:
      return state
  }
}

function bindActionCreators(actionCreators, dispatch) {
  function bindActionCreator(actionCreators, dispatch) {
    return function () {
      return dispatch(actionCreators.apply(this, arguments))
    }
  }
  if (typeof actionCreators === 'function') {
    bindActionCreator(actionCreators, dispatch)
  }
  const boundActionCreator = {}
  for (const key in actionCreators) {
    boundActionCreator[key] = bindActionCreator(actionCreators[key], dispatch)
  }
  return boundActionCreator
}

let store = createStore(reducer)

let actions = {
  increment() {
    return { type: INCREMENT }
  },
  decrement() {
    return { type: DECREMENT }
  }
}
let boundActions = bindActionCreators(actions, store.dispatch)

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: store.getState().num
    }
  }
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.setState({ num: store.getState().num })
    })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  handleClick = () => {
    boundActions.increment()
  }

  render() {
    return (
      <div>
        <p>{this.state.num}</p>
        <button onClick={this.handleClick}>
          +
        </button>
      </div>
    );
  }
}

export default Counter;