React-Redux的用法

1  创建redux目录

2   编写action

 

3  编写reducer

 

4  编写 reducers  combineReducers 将多个reducer整合到一起

tip:  reducer就是纯函数, 接收state 和action  返回一个新的state   combineReducers【处理整颗树】 和  reducer【处理树的某一个节点】同理

5  store的职责

 

6  编写store

7  编写testRedux.js

8 执行命令

tip: 此例子是标明 redux 和  react没关系,虽然可以相互合作

8   增加counter页面

 

tip: 有两种不同的引入写法  一个是用大括号   一个是不用大括号(export default的模式)

9  增加router页面

 

10  Counter 和  Redux联合起来, 使得Counter能获取Redux的state, 并且能发起action

当然可以使用Store.getState()获取数据, 但这比较麻烦   react-redux提供了一个方法  connect

connect 接收两个参数  mapStateToProps   是将redux的state转为组件的props,

mapDispatchToprops 就是将发起的actions方法转为props属性函数

疑问: 

这块属性转化为啥需要访问  state.counter属性   counter是在哪块赋值的

回答疑问:

在控制打印的数据内容是:

11 添加store

 

tip: Provider 组件是让所有的组件可以访问到store, 不用手动传递, 也不用手动监听

connect  函数作用是从Redux state树中读取部分数据, 并通过props将这些数据提供给要渲染的组件, 也传递dispatch函数到prop

12  异步请求 修改  actions/userInfo.js

13  上面的actions返回了函数, 增加了这种类型  需要引用 redux-thunk

14  在store.js 中引入redux-thunk

15  编写userInfo组件

16   添加路由

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值