這篇文章帶給大家的內容是關於一個redux的簡單實作方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
簡介： 手寫實作 redux/react-redux基礎api
redux api
createStore(reducer, [preloadedState], enhancer)
创建一个 Redux store 来以存放应用中所有的 state reducer (Function): 接收两个参数，当前的 state 树/要处理的 action，返回新的 state 树 preloadedState: 初始时的 state enhancer (Function): store creator 的高阶函数，返回一个新的强化过的 store creator
Store 方法
getState() 返回应用当前的 state 树 dispatch(action) 分发 action。这是触发 state 变化的惟一途径 subscribe(listener) 添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化 replaceReducer(nextReducer) 替换 store 当前用来计算 state 的 reducer
#combineReducers(reducers)
把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数
import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'
export default combineReducers({
todos,
counter
})#applyMiddleware(...middleware)
使用包含自定义功能的 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 => actionimport { 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))bindActionCreators(actionCreators, dispatch)
compose(...functions)
#從右到左來組合多個函數。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()
)
)#實作一個簡單的redux
##使用redux實作
// 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
}
}以上是一個redux的簡單實作方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
