一个最简单的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>
    );
  }
}