一个最简单的Redux实现

一个最简单的Redux实现

// 从redux中引入一个createStore
import { createStore } from 'redux';

// 定义一个reduce方法
// reduce方法需要两个参数,一个当前状态对象state,一个用于描述将要对store做些什么的对象
function clickReduce(state = { text: '这是什么' }, action) {
  // 如果是指定的点击事件,新建一个对象,将原有的state与新的属性合并后返回
  if (action.type === 'BTN_CLICK') {
    // 这里我们不能直接改变state的内容,只需要返回一个我们修改完成的对象就行
    return Object.assign({}, state, action.payload);
  }
  // 如果不是,返回原有的state(无任何变动)
  return state;
}

// 新建一个状态仓库,Redux通过全局唯一的store对象管理项目中所有的状态
// createStore接受三个参数 (reducer, preloadedState, enhancer)
// 参数一, 必填 reducer 一个reduce或reduce的集合
// 参数二, 可选 preloadedState 一个state或state的集合
// 参数三, 可选 store增强器,一个柯里化工具
const store = createStore(clickReduce);
// 我们来看看store里面有些什么内容

// action对象
const clickAction = {
  // reduce里注册的事件type
  type: 'BTN_CLICK',        // action用于区别与其它action的标记
  // 需要传入的状态
  text: '这是redux返回的内容' // payload必须是同步的
}

export default class MiniRedux extends PureComponent {
  constructor(props) {
    super(props);
    // 设定组件state为从store中获取
    this.state = store.getState();
  }

  componentDidMount() {
    // 我们可以理解为这是一个事件监听回调,类似于JQ中的on
    store.subscribe(() => {
      // 当store发生改变的时候,我们重新读取state
      this.setState(store.getState());
    });
  }

  btnClick() {
    // 通过store的dispatch方法去主动触发reduce,参数是一个action对象;
    // 类似于JQ中的trigger或是vue中的emit
    store.dispatch(clickAction);
  }

  render() {
    return (
      <div className="miniRedux">
        <span>{this.state.text}</span>
        <button onClick={this.btnClick}>点我</button>
      </div>
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值