本篇文章给大家带来的内容是关于一个redux的简单实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
简介： 手写实现redux/react-redux基础api
redux api
createStore(reducer, [preloadedState], enhancer)
创建一个 Redux store 来以存放应用中所有的 statereducer (Function): 接收两个参数，当前的 state 树/要处理的 action，返回新的 state 树preloadedState: 初始时的 stateenhancer (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 => 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))
登录后复制
bindActionCreators(actionCreators, dispatch)
compose(…functions)
从右到左来组合多个函数。
当需要把多个 store 增强器 依次执行的时候，需要用到它
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处理函数，参数是状态和新的actionfunction counter(state=0, action) { // let state = state||0 switch (action.type) { case '加机关枪': return state + 1 case '减机关枪': return state - 1 default: return 10 }}// 新建storeconst store = createStore(counter)const init = store.getState()console.log(`一开始有机枪${init}把`)function listener(){ const current = store.getState() console.log(`现在有机枪${current}把`)}// 订阅，每次state修改，都会执行listenerstore.subscribe(listener)// 提交状态变更的申请store.dispatch({ type: '加机关枪' })
登录后复制
实现createStore,store的相关方法
./self-redux.jsexport 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的简单实现方法（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2738843.html
