并且在一个组件里更新这个参数后,全局里任何使用这个参数的地方都能实时更新 适用于购物车,图标右上角数字,form表单数据字典配置,权限配置,实时消息数量等等 client页面 // 此处使用了redux-actions import { handleActions } from 'redux-actions' import * as actionTypes from '.. action页面 // 此处使用了redux-actions import {createAction} from 'redux-actions'; import * as actionTypes
本来是打算使用第三方组件的,比如redux-actions(https://github.com/acdlite/redux-actions)等,但是实验了一下,功力不足反而没有成功,然后自己照抄官方说明写了一下
项目用到的技术框架 该项目采用 react 技术栈,用到的主要框架包括:react、 redux、 react-redux、 redux-actions、 reselect、 redux-saga、 seamless-immutable actions 业务里面我使用了 redux-actions 来产生 action,这里用工具栏做示例,先看一段业务代码: import { createAction } from 'redux-actions type: type.BIZ_TOOLBAR_KEYWORDS_UPDATE, payload: keywords }; // 断言 redux-actions reducers 接着是 reducers,依然采用 redux-actions 的 handleActions 来编写 reducer,这里用表格的来做示例: import { handleActions } from 'redux-actions'; import Immutable from 'seamless-immutable'; import * as type from '..
片段九:redux-actions对state的加工片段 // redux-actions/src/handleAction.js const handleAction = (type, reducer return (previous, current) => { reducers.reduce((p, r) => r(p, current), previous); } } // redux-actions
g.js /* eslint quote-props: 0 */ import { fromJS } from 'immutable'; import { handleActions } from 'redux-actions 改造reducers的处理 引入了redux-actions库,其中对reducers的处理进行了很好的封装。 如果有兴趣,可以自行去看redux-actions的源码。
这需要从 redux-actions模块引入 createAction 方法,并且写法也要变成下面这样: import { createAction } from 'redux-actions'; class
,这里这么写只是可以更好的了解redux,程序员当然是最懒的那一类人了,github上还有很多组件可以节省代码时间,比如redux-actionshttps://github.com/acdlite/redux-actions
这需要从redux-actions模块引入createAction方法,并且写法也要变成下面这样。 import { createAction } from 'redux-actions'; class AsyncApp extends Component { componentDidMount
我们使用了redux-actions的createAction创建dispatch需要的消息: ? 在Reducer中,通过redux-actions的handleAction来处理action,避免使用丑陋的switch语句: ?
dispatch , Redux 提供了中间件机制,使用者可以根据需要来强化 dispatch 函数,传统的 dispatch 是不支持异步的,但是可以针对 Redux 做强化,于是有了 redux-thunk,redux-actions
只需要这样发射action就可以啦: dispatch(eatApple(3)) 普通action的actionCreator封装工作, 可以使用 redux-actions 自动完成, 查看其文档就可以快速上手