初学redux确实觉得很绕,因为封装的文件夹多容易乱。下面时我整理的步骤。
本文码云地址:https://gitee.com/guo–dong/redux.git
异步请求为第10条
本文store代表redux实例
本文用到的插件有:
1、npm install --save redux
redux
用来集中的管理react中多个组件的状态
2、npm install redux-thunk --save
使用thunk后,如果return的是一个函数就会自动接收一个dispatch方法
3、npm install --save axios
axios
用来发送异步请求
4、npm install --save react-redux
4.1、使用react-redux
:中的connect进行多个组件中的数据合并
4.2、使用Provider
:Provider 其实就只是一个外层容器,它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将Provider定义为整个项目最外层的组件,并设置好store。那么整个项目都可以直接获取这个store。它的原理其实是通过React中的Context来实现的。它大致的核心
文件目录
标红的时重点用到的文件,store文件就代表redux
开始使用
1、下载
npm install --save redux
2、创建store文件夹
在src目录下创建store文件夹并在此文件夹下创建一下文件:
2.1、index.js
用来存放store实例
2.2、HomeReducer.js
用来存放Home页面的数据
3.3、reducer.js
用来合并数据
4.4、actionCreate.js
用来封装任务
3、创建store实例并引入reducer
4、HomeReducer.js,就是专门为Home页面创建的数据,当然其他页面也可以进行访问。其中包含我们对数据的操作。
Action 是把数据从应用传到 store 的有效载荷。唯一改变 state 的方法就是触发 action
。一般来说你会通过 store.dispatch() 将 action 传到 store。
action.js由在页面调用第6步的任务时返回,返回值决定了我们对数据的操作逻辑。
5、reducer.js,引入combineReducers
、引入HomeReducer.js中的数据
5.1、combineReducers
用来惊醒数据合并,因为我们现在值创建了一个页面的数据,后续还会多个页面也需要创建数据,合并也是为了集中管理,后期我们号调用,所以进行合并。
6、对任务进行封装
封装的话是因为,如果我们做起来来项目,会有很多任务,如果都写在组件里面不好查找,容易重复,封装在一个文件里面可以避免这些。用的时候在对应的页面引入就行。
7、在页面调用store中的数据
7.1、引入store实例
7.2、引入reducer.js中合并的Home页面数据
7.3、调用action
7.4、将store中的数据赋值给state方便调用
7.5、用store.subscribe监听store中数据是否由变化,如果由变化就更新数据
8、至此简单的封装完毕,如果还由多个页面需使用redux需要怎么做,其实跟上面的写法时一样的,接下来接着上详细步骤。
1、例如我们现在由一个Phone也许要用使用redux,那我我们就在store文件下创建一个PhoneReducer.js。
2、同样我们也需要对任务进行封装
3、在reducer.js中引入PhoneReducer.js合并数据
4、在页调用
9、react-redux
如上面的页面那个页面要使用store中的数据都需要引入,比较麻烦,react-redux就帮助我们解决这个问题,只需配置一次,所有组件都可以访问到store实例,并且react-redux已经帮我们把subscribe封装过了过了,只要数据发生改变就会自动更新。
react-redux是redux 的作者封装的一个 react 专用的库,它能够使你的react组件从redux store中读取数据
,并且向store分发action更新数据。react-redux和redux在项目中是配合使用的
react-redux由两个重要的属性
Provider
:Provider是一个组件,它接受store作为props,然后通过context往下传,这样react中任何组件都可以通过contex获取store。
connect
:用来连接store实例与组件,使得组件可以拿到store中的数据。
9.1、下载
npm install --save react-redux
9.2、使用
在项目根目录中引的index.js中,引入react-redux中的Provider包裹根组件,引入store实例。
注意不要忘记传递store,不然会报错
9.2、在需要使用store中数据的页面使用connect连接store与组件
connect在调用之后时一个高阶组件,connect中的aa为形参可以随便写,代表接收store中的数据。
使用connect连接完毕组件与store之后,store中的数据就映射到组件的props上了,this.props就代表的时store实例,也就是redux
其他组件也需要连接store的话,方法和9.2的方法一样
在phone页面调用
此截图就时调用的修改操作
10、action里处理异步—redux-thunk
需要安装中间件 redux-thunk ,redux-thunk可以增强dispatch的功能,让dispatch可以接收一个函数作为参数。
10.1、下载
npm install redux-thunk --save
npm install --save axios
10.2、引用
10、请求异步数据
注意:使用thunk后,如果return的是一个函数就会自动接收一个dispatch方法,axios请求结果获得后,再去走上面的reducer流程,将数据传递给action。
然后再页面中正常调用他就行
这样写代码看着有些冗余可以这样简化一下
10.3、在页面掉用store
下载:npm install --save react-redux
此时测试的话,可以发现数据时更新了,但是视图没更新数据。此时需要在根目录index.js中建通store中的数据变化。
解决办法:
在根目录中监听store中用store.subscribe()
数据是否发生变化,如果发生变化重新渲染页面。