Redux创建store

在这里插入图片描述
components:组件
action:命令或者是动作
store:相当于数据库
reducers:数据的记录

创建reducer具体的数据文件

  1. 要初始化的数据

const defaultState = {
data:[1,2,3,5,6]

}

2.使用默认的数据对reducer进行赋值,并且暴露此模块

export default (state = defaultState,action) =>{
判断action的类型是否匹配
if (action.type===“input_change”) {
若匹配则复制新的state,然后在变更最后返回
}
return state;
}

创建store数据的管理

1.导入reducer
import { createStore } from ‘redux’;
import reducer from ‘./reducer’

  1. 创建store,然后使用reducer的数据的store赋值,最后暴露模块
    const myStore = createStore(reducer);

    export default myStore;

组件渲染数据
1.导入store
2.在组件的constructor函数中使用store.getState()和 myStore.subscribe(this.handlerStore)监听是他特是否发生改变获取store中的数据
3. 定义action然后发送
const action = {
type:“input_change”,
value:e.target.value
};
//将action发送到store
myStore.dispatch(action);
4 .使用数据渲染组件

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值