某某网站安全建设方案,seo高手培训,移动端产品,做网站公司济南不吹不黑#xff0c;redux蛮好用。只是有时略显繁琐#xff0c;叫我定义每一个action、action type、使用时还要在组件上绑定一遍#xff0c;臣妾做不到呀#xff01;下面分享一种个人比较倾向的极简写法#xff0c;仍有待完善#xff0c;望讨论。 github: github.com/li… 不吹不黑redux蛮好用。只是有时略显繁琐叫我定义每一个action、action type、使用时还要在组件上绑定一遍臣妾做不到呀下面分享一种个人比较倾向的极简写法仍有待完善望讨论。 github: github.com/liumin1128/… 基于redux、async/await、无侵入、兼容性良好的异步状态管理器。 install npm i -S redux-effect// or
yarn add redux-effect
复制代码use import { createStore, applyMiddleware, combineReducers } from redux;
import { reduxReduers, reduxEffects } from redux-effect;const models [ test1, test2, ...];const reducers combineReducers(reduxReduers(models));
const middlewares [ reduxEffects(models) ];const store createStore(reducers,initialState,middlewares);
复制代码从代码可以看出从reduxReduers, reduxEffects中得到的就是标准的reducer和middleware完美兼容其他redux插件也可以轻松整合进老项目中。 完整例子example model 在redux-effect中没有action的概念也不需要定义action type。 所有关于某个state的一切声明在一个model中本质就是一个对象。 export default {namespace: test,state: { text: hi! },reducers: {save: (state, { payload }) ({ ...state, ...payload }),clear: () ({})},effects: {fetch: async ({ getState,dispatch }, { payload }) {await sleep(3000);await dispatch({ type: test/clear });await sleep(3000);await dispatch({ type: test/save, payload: { text: hello world } });}}
};复制代码namespace model的命名空间对应state的名字必填只接受一个字符串。 state state的初始值非必填默认为空对象 reducers 必填相当于同步执行的action方法接受两个参数state和action合并后返回新的state状态值。 effects 非必填相当于异步执行的action方法接受两个参数store和actionstore里包括redux自带的getState和dispatch方法action为用户dispatch时带的参数。 dispatch 这里的dispatch就是redux中的dispatch但有几个约定。 不传定义好的action而是直接传一个普通对象。type的组织形式namespace / reducer或effect方法名参数的传递需要合并的参数用payload包裹定义每一个action并将其绑定到视图层过于繁琐去action化则让事件的触发变的灵活。 普通事件 发送事件时不区分同步还是异步只管dispatch一切都已在model中定义好。 // 同步
dispatch({ type: test/save, payload: { text: hello world } })
// 异步
dispatch({ type: test/fetch })
复制代码等待 等待一个事件完成再执行逻辑dispatch方法是可以被await的十分轻松。 async function test() {await dispatch({ type: test/fetch })await console.log(hello world)
}
复制代码回调 等待某个事件再执行外部定义的某个回调函数只需要在action字段里加上callback方法在effect中调用即可。 相比较await回调可以拿到某些返回值也可以在effect流程的中间部分执行。
dispatch({ type: test/fetch, callback1, callback2 }){effects: {fetch: async ({ getState,dispatch }, { payload, callback, callback2 }) {const state await getState()await sleep(3000);await callback1(state)await sleep(3000);await callback2(state)}}
}
复制代码自定义reducer reducer其实就是redux中的reducer用法完全一样。比如定义一个push方法将后续数据压入到原有数据后面可以这样写。 export default {namespace: test,state: { data: [] },reducers: {save: (state, { payload }) ({ ...state, ...payload }),clear: () ({}),push: (state, { payload {} }) {const { key data, data } payload;return { ...state, [key]: state[key].concat(data) };}},
};
复制代码自定义effect effect其实就是一个普通async函数接受store和action两个参数可以使用async/await可以执行任意异步方法可以随时拿到state的值可以dispatch触发另一个effect或者reducer。 loading 也许你会想监听某个effect拿到loading状态以便在ui给用户一个反馈。一般情况下监听一个异步方法只需要在effect的开头和结束各自设定状态即可与常规写法无异。 但这里也提供一种model级别的loading状态新增一个名为loading的model再使用reduxEffectsWithLoading包裹需要监听的model即可。 关于model-creator 以上所做的事情是将redux核心规范为model得到了统一且可以复用的数据模型这为自动生成model创造了可能性如果能通过工厂模式自动化创建具有类似功能且可以随意装配的model一切将变得更加美好。 Coming Soon
