redux
作者:互联网
redux真的太麻烦了。。
弄了一堆依赖,用来用去很晕
但是领导让用就得用。。
所需依赖
redux
react-redux
redux-thunk
安装命令 npm i redux react-redux redux-thunk
抽离redux成为独立文件(文件结构)
--src
--store
--reducer ----reducer文件夹
--index.js ----reducer的主文件
--partReducer.jsf ----reducer的分支文件,可有多个
-- ......
--actionf ----action文件夹
--type.js ----标识action的动作来源
--partAction.js ----dispatch的action
-- ...... ----多个state数据可对应多个action
--store.js ----主文件,store数据
调用方法
|
来自 |
作用 |
参数 |
Provider |
react-redux |
包裹根组件,连接store |
|
createStore |
redux |
创建stroe,传递参数 |
createStore (reducer,state,middleware) |
thunk |
redux-thunk |
中间件,异步执行数组,分发action
|
|
combineReducer |
redux |
将reducer分支数据合成根reducer,供view调用 |
|
connect |
react-redux |
当前组件和action之间的连接,export时调用
|
connect(根reducer数据,{ action})(组件名)
|
type |
type.js |
reducer中action触发state变化时标识action的动作来源 |
|
mapStateToProps |
|
获取reducer返回的数据 |
|
compose |
redux |
做redux浏览器的调试适配
|
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
|
注意
尽量使用es6语法
注意模块的导出和引入
Tips
腾讯课堂的米斯特吴有redux的视频比较完整但是感觉入手困难,需要完整看一遍,然后再跟着敲一边,勉强理解。传送门
标签:reducer,js,thunk,action,redux,store 来源: https://blog.csdn.net/wly_syp/article/details/89951574