// 自定義的redux狀態(tài)管理
// 用 createStore 方法接收 reducer 純函數(shù)
export const createStore = reducer => {
    // 接收新的帶有單一數(shù)據(jù)源的對(duì)象
    let state = undefined
    // 訂閱隊(duì)列
    let tasks = []
    // 3.store.dispatch({type,payload})
    const dispath = action => {
        // 將 action 交給 reducer ，返回一個(gè)新的數(shù)據(jù)源
        state = reducer(state, action)
        // 數(shù)據(jù)源發(fā)生變化時(shí)，讓訂閱隊(duì)列中的每一個(gè)回調(diào)函數(shù)執(zhí)行
        tasks.forEach(cb => cb())
    }
    const subscribe = cb => {
        // 把回調(diào)函數(shù)放入訂閱隊(duì)列中
        tasks.push(cb)
        // 取消訂閱時(shí),刪除訂閱隊(duì)列中的回調(diào)函數(shù)
        return () => tasks.splice(tasks.indexOf(cb), 1)
    }
    // 返回?cái)?shù)據(jù)源
    const getState = () => state
    // 2.初始化，防止組件第一次調(diào)用 getState 得到的是 undefined
    dispath({ type: '@@init@@' })
    // 返回 redux 工作流中需要的三個(gè)函數(shù)
    return {
        dispath,
        subscribe,
        getState
    }
}

// 導(dǎo)入倉庫
import { createStore } from './redux'
// 5.設(shè)置一個(gè)初始值
const initState = {
    num: 100
}
// 4.創(chuàng)建 reducer 純函數(shù)
const reducer = (state = initState, action) => {
    // 完成組件中加的操作
    if (action.type === 'add') return { ...state, num: state.num + action.payload }
    return state;
}
const store = createStore(reducer)
export default store

import React, { Component } from 'react'
// 組件中導(dǎo)入倉庫
import store from './store'
class App extends Component {
  componentDidMount() {
    // 訂閱 redux 的頻道，只要頻道發(fā)生更改，就會(huì)觸發(fā)視圖更新
    // 并且讓 unsubscribe 接收到 redux 中取消訂閱的函數(shù)
    this.unsubscribe = store.subscribe(() => this.forceUpdate())
  }
  componentWillUnmount() {
    // 取消訂閱,組件卸載時(shí)執(zhí)行
    this.unsubscribe()
  }
  render() {
    return (
      <div>
        {/* 1.組件通過 getState 得到數(shù)據(jù) */}
        <h3>{store.getState().num}</h3>
        <hr />
        <button
          onClick={() => {
            // 動(dòng)作：添加；數(shù)據(jù)：每次加2
            store.dispath({ type: 'add', payload: 2 })
          }}
        >
          ++++
        </button>
      </div>
    )
  }
}
export default App

# yarn add -D @redux-devtools/extension
import { composeWithDevTools } from '@redux-devtools/extension'
const store = createStore(
  reducer,
  composeWithDevTools()
);

// 1.導(dǎo)入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法
import { createStore } from 'redux'
// 配合瀏覽器安裝的插件來進(jìn)行redux調(diào)試所用  
// 開發(fā)時(shí)有用，生產(chǎn)要關(guān)閉
import { composeWithDevTools } from '@redux-devtools/extension'
// 2.初始state數(shù)據(jù)
const initState = {
  num: 100
}
// 3.定義一個(gè)純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個(gè)新的state
const reducer = (state = initState, action) => {
  if (action.type === 'add') return { ...state, num: state.num + action.payload }
  return state;
}
// 得到數(shù)據(jù)對(duì)象
let store
// 開發(fā)與生產(chǎn)環(huán)境的判斷，提高安全性
process.env.NODE_ENV === 'development'
  ?
  store = createStore(
    reducer,
    composeWithDevTools()
  )
  :
  store = createStore(
    reducer
  )
// 導(dǎo)出
export default store

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 導(dǎo)入Provider生產(chǎn)數(shù)據(jù)者組件
import { Provider } from 'react-redux'
// 導(dǎo)入數(shù)據(jù)源
import store from './store'
ReactDOM.render(
  // 包裹所有的路由
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

import React, { Component } from 'react'
// 提供一個(gè)高階組件 connect 用來把 redux 中的 state 和 action 映射到當(dāng)前組件的 props 中
import { connect } from 'react-redux'
// 此函數(shù)必須要返回一個(gè)json對(duì)象
// 函數(shù)的 state 參數(shù)就是 redux 中的 state 數(shù)據(jù)
const mapStateToProps = state => {
  return { num: state.num }
}
// mapStateToProps 函數(shù)的兩種簡(jiǎn)寫寫法
// const mapStateToProps = state => state
// @connect(state => state, mapDispatchToProps)
// 此函數(shù)必須要返回一個(gè)json對(duì)象
// dispatch 就是之前通過 store.dispatch 的方法
const mapDispatchToProps = dispatch => {
  return {
    add(n = 1) {
      // 動(dòng)作：增加，數(shù)據(jù)：n
      dispatch({ type: 'add', payload: n })
    }
  }
}
// 函數(shù)的方式可以同步也可以異步，dispatch 是你手動(dòng)在需要的地方來調(diào)用
// const mapDispatchToProps = dispatch => {
//   return {
//     add(n = 1) {
//       setTimeout(() => {
//         dispatch({ type: 'add', payload: n })
//       }, 1000)
//     }
//   }
// }
// 該函數(shù)的對(duì)象寫法：
// 如果為對(duì)象方式則只能使用同步，不能用異步，因?yàn)樵?connect 實(shí)現(xiàn)時(shí)如果是對(duì)象，則它會(huì)主動(dòng)調(diào)用 dispatch
// 調(diào)用了 dispatch 它就立刻執(zhí)行。而如果是一個(gè)異步，則就會(huì)不符合 dispatch 要求，則報(bào)錯(cuò)
// const mapDispatchToProps = {
//   add: (n = 1) => ({ type: 'add', payload: n })
// }
// 參數(shù)1：函數(shù)，把 redux 中的 state 數(shù)據(jù)映射到當(dāng)前的 props 屬性中
// 參數(shù)2：函數(shù)|對(duì)象，把你操作的 dispatch 方法映射到當(dāng)前的 props 屬性中
@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  render() {
    console.log('props', this.props)
    return (
      <div>
        <h3>{this.props.num}</h3>
        <hr />
        <button onClick={() => this.props.add()}>++++</button>
      </div>
    )
  }
}
export default App