一個redux的簡單實現方法（代碼）

創建一個 Redux store 來以存放應用中所有的 state
reducer (Function): 接收兩個參數，當前的 state 樹/要處理的 action，返回新的 state 樹
preloadedState: 初始時的 state
enhancer (Function): store creator 的高階函數，返回一個新的強化過的 store creator

getState() 返回應用當前的 state 樹
dispatch(action) 分發 action。這是觸發 state 變化的惟一途徑
subscribe(listener) 添加一個變化監聽器。每當 dispatch action 的時候就會執行，state 樹中的一部分可能已經變化
replaceReducer(nextReducer) 替換 store 當前用來計算 state 的 reducer

把一個由多個不同 reducer 函數作為 value 的 object，合并成一個最終的 reducer 函數

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
 todos,
 counter
})

使用包含自定義功能的 middleware 來擴展 Redux 是
...middleware (arguments): 遵循 Redux middleware API 的函數。每個 middleware 接受 Store 的 dispatch 和 getState 函數作為命名參數，并返回一個函數。該函數會被傳入 被稱為 next 的下一個 middleware 的 dispatch 方法，并返回一個接收 action 的新函數，這個函數可以直接調用 next(action)，或者在其他需要的時刻調用，甚至根本不去調用它。調用鏈中最后一個 middleware 會接受真實的 store 的 dispatch 方法作為 next 參數，并借此結束調用鏈。所以，middleware 的函數簽名是 ({ getState, dispatch }) => next => action

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import * as reducers from './reducers'

let reducer = combineReducers(reducers)
// applyMiddleware 為 createStore 注入了 middleware:
let store = createStore(reducer, applyMiddleware(thunk))

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import DevTools from './containers/DevTools'
import reducer from '../reducers'

const store = createStore(
 reducer,
 compose(
 applyMiddleware(thunk),
 DevTools.instrument()
 )
)

// import { createStore } from 'redux'
// 將redux文件替換成自己實現的redux文件
 import { createStore } from './self-redux.js'

// 這就是reducer處理函數，參數是狀態和新的action
function counter(state=0, action) {
 // let state = state||0
 switch (action.type) {
 case '加機關槍':
 return state + 1
 case '減機關槍':
 return state - 1
 default:
 return 10
 }
}
// 新建store
const store = createStore(counter)
const init = store.getState()
console.log(`一開始有機槍${init}把`)
function listener(){
 const current = store.getState()
 console.log(`現在有機槍${current}把`)
}
// 訂閱，每次state修改，都會執行listener
store.subscribe(listener)
// 提交狀態變更的申請
store.dispatch({ type: '加機關槍' })

./self-redux.js

export function createStore(reducer) {
 let currentState = {}
 let currentListeners = []
 function getState() {
 return currentState
 }
 function subscribe(listeners) {
 currentListeners.push(listener)
 }
 function dispatch(action) {
 currentState = reducer(currentState, action)
 currentListeners.forEach(v => v())
 return action
 }
 dispatch({ type: '@rainie/init-store' })
 return {
 getState,
 subscribe,
 dispatch
 }
}