深入浅出redux知识

npm install redux

// 定义常量
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
// 编写处理器函数
const 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
  }
}
// 创建容器
const store = createStore(reducer)

const actions = {
  increment() {
    return { type: INCREMENT }
  },
  decrement() {
    return { 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()
  }
  increment = () => {
    store.dispatch(actions.increment())
  }
  decrement = () => {
    store.dispatch(actions.decrement())
  }
  render() {
    return (
      <div>
        <span>{this.state.num}</span>
        <button onClick={this.increment}>加1</button>
        <button onClick={this.decrement}>减1</button>
      </div>
    );
  }
}

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

actions = 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()
  }
  increment = () => {
    actions.increment()
  }
  decrement = () => {
    actions.decrement()
  }
  render() {
    return (
      <div>
        <span>{this.state.num}</span>
        <button onClick={this.increment}>加1</button>
        <button onClick={this.decrement}>减1</button>
      </div>
    );
  }
}

export default Counter;

npm install react-redux

import {Provider} from 'react-redux'
import {createStore} from 'redux'

const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

const 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
  }
}
const store = createStore(reducer)

ReactDOM.render((
  <Provider store={store}>
    <Counter />
  </Provider>
), document.getElementById('root'))

import {connect} from 'react-redux'

const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
let actions = {
  increment() {
    return { type: INCREMENT }
  },
  decrement() {
    return { type: DECREMENT }
  }
}class Counter extends Component {
  render() {
    return (  <div>
    <span>{this.props.num}</span>
    <button onClick={() => this.props.increment()}>加1</button>
    <button onClick={() => this.props.decrement()}>减1</button>  </div>
);  }
}
const mapStateToProps = state => {
  return state
}
const mapDispatchToProps = actions
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

const mapStateToProps = state => {
  return { a: state.a }
}

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

const mapDispatchToProps = dispatch => {
  return {
    increment: (...args) => dispatch(actions.increment(...args))
  }
}

import createStore from './createStore'


export {
  createStore
}

import isPlainObject from './utils/isPlainObject'
import ActionTypes from './utils/actionTypes'

function createStore(reducer, preloadedState) {
  let currentState = preloadedState
  function getState() {
    return currentState
  }
  function dispatch(action) {
    // 判断是否是纯对象
    if (!isPlainObject(action)) {
      throw new Error('类型错误')
    }
    // 计算新状态
    currentState = currentReducer(currentState, action)
  }
  dispatch({ type: ActionTypes.INIT })
  return {
    dispatch,
    getState
  }
}

export default createStore

function isPlainObject (obj) {
  if (typeof obj !== 'object' || obj === null) {
    return false
  }
  let proto = obj
  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }
  return Object.getPrototypeOf(obj) === proto
}

export default isPlainObject

function createStore(reducer, preloadedState) {
  let currentState = preloadedState
  let currentReducer = reduce
  let currentListeners = []
  let nextListeners = currentListeners
  // 拷贝
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }
  
  function getState() {
    return currentState
  }
  
  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('类型错误')
    }
    // 订阅
    ensureCanMutateNextListeners()
    nextListeners.push(listener)
    return function unsubscribe() {
      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

  function dispatch(action) {
    // 判断是否是纯对象
    if (!isPlainObject(action)) {
      throw new Error('类型错误')
    }

    // 计算新状态
    currentState = currentReducer(currentState, action)
    // 发布
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
  }

  dispatch({ type: ActionTypes.INIT })
  return {
    dispatch,
    getState,
    subscribe
  }
}

const randomString = () => Math.random().toString(36).substring(7).split('').join('.')

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`
}

export default ActionTypes

export default 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 boundActionCreato

}