redux的理解与实际运用

redux类似于vuex对全局的变量进行定义与操作

store:Redux 应用只有一个单一的 store

action:Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

reducer:Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。

实际运用

先在src中新建store,reducers,action三个文件夹

由于可能要在action中异步使用到其他action方法这里需要安装插件redux-thunk

npm install redux-thunk

1.首先在store中新建index.tsx文件

在index中引入了createStroe,combineReducers,appleMiddleware用于必要的操作,再将reducer文件中的各个reducer引入,这里用all来将这些reducer合并然后传给store

合并reducer

2.在action中创建actionType.tsx文件

创建actiontype的目的是为了将方法常量化方便管理与维护

3.在main.tsx中把stroe全局挂载

4.在action中新建自己的action例如useraction

5.在reducers中新建一个userReducer.tsx来定义action中type返回的是什么样的数据(不同的type返回不同的数据)。Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。

6.在页面中使用

首先用rcr创建一个页面

再导入useraction

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值