redux源码分析：用 redux + react 搭建一个极简的计数器项目

搭建一个极简的项目，用来分析 redux 源码

先列重点

1. 准备 store

2. 准备 render 函数 —— 即运行这个方法，可以刷新 UI

3. 先运行一次 render();

4. 做好订阅 store.subscribe(render)保证后续更新可以触发 render 再次执行

.
├── README.md
├── package.json
└── src
    ├── index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

const root = document.getElementById('root');

// reducer 纯函数
const reducer = (state = 0, action) => {
};

// 创建一个store
const store = createStore(reducer);

const render = () => ReactDOM.render(
  <div className="counter">
    <span>{store.getState()}</span>
  </div>,
  document.getElementById('root')
);

render();

// store订阅一个更新函数，待dispatch之后，执行这个更新函数，获取新的值
store.subscribe(render);

 

项目结构如下

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── index.js
    └── logo.svg

2 directories, 11 files

核心文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

const root = document.getElementById('root');

// reducer 纯函数
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'ANY':
      store.dispatch({ type: 'DECREMENT' });
      return state;
    default:
      return state;
  }
};

// 创建一个store
const store = createStore(reducer);

const render = () => ReactDOM.render(
  <div className='counter'>
    <span>{store.getState()}</span>
    <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>INCREMENT</button>
    <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>DECREMENT</button>
    <button onClick={() => store.dispatch({ type: 'ANY' })}>ZUOSI</button>
  </div>,
  root,
);
render();
// store订阅一个更新函数，待dispatch之后，执行这个更新函数，获取新的值
store.subscribe(render);