其他分享
首页 > 其他分享> > redux

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