react--记录(store得创建)

本文介绍如何使用Redux创建store文件夹及其内部的index.js和reducer.js文件,详细解释了store的创建过程,reducer中状态的初始化与更新逻辑,以及如何通过订阅store来实现组件状态的实时更新。

建立一个store 文件夹
建立两个文件【index.js】+【reducer】

index:入口文件

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);

export default store;

reducer:数据库文件

const defaultState = {
    list:[],
    inputValue: ''
};
export default (state = defaultState,action) => {
    if(action.type === 'change_inputValue'){
        const newState = JSON.parse(JSON.stringify(state)) //深拷贝
        newState.inputValue = action.inputValue;
        return newState
    }
   
    return state;
}

更新state数据重新渲染函数:

store.subscribe(this.chan_state)       //直接在state里面调用


 chan_state(){
   this.setState(store.getState)
 }

让页面数据等于store数据

constructor(props){
    super(props)
    this.state = store.getState()
  }

把action传给reducer
default.a.getState is not a function

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值