手写Mini Redux实现

Copy 
1.
2├── connect.js //connect实现
3├── index.jsx  //测试用例
4├── reducer.js //测试用例的reducer
5└── store.js  //store实现

Copy 
1// 迷你版redux实现,全局数据仓库构造函数
2function createStore(reducers) {
3  var state = {};
4  var listeners = [];
5  var getState = () => state;
6  var dispatch = (actionObj) => {
7    let [model, action] = actionObj.type.split("/"); 
8    state = reducers[model](state, action);
9    listeners.forEach((l) => l());
10  };
11  var subscribe = (listener) => {
12    listeners.push(listener);
13    return () => {
14      listeners = listeners.filter((l) => l !== listener);
15    };
16  };
17  return {
18    getState,
19    dispatch,
20    subscribe,
21  };
22}
23export default createStore;

Copy 
1import React, { useState, useMemo, useReducer } from "react";
2import createStore from "./store";
3import reducers from "./reducer";
4
5function baseReducer(state, action) {
6  return {
7    ...state,
8    ...action.payload,
9  };
10}
11
12//迷你简易版redux-react实现
13const ConnectAdvanced = ({ WrappedComponent, actualChildProps }) => {
14  const renderedWrappedComponent = useMemo(
15    () => <WrappedComponent {...actualChildProps} />,
16    [WrappedComponent, actualChildProps]
17  );
18  return <>{renderedWrappedComponent}</>;
19};
20
21const ConnectFunction = (props) => {
22  const { store, mapStateToProps, dispatch, state, component } = props;
23  // let [actualProps, setActualProps] = useState(state);
24  let [actualProps,dispatchBase] = useReducer(baseReducer,state)
25  store.subscribe(function () {
26    const storeData = store.getState();
27    let state = mapStateToProps(storeData);
28    // setActualProps(state);
29    dispatchBase({
30      type:'save',
31      payload:state
32    })
33  });
34  return (
35    <ConnectAdvanced
36      WrappedComponent={component}
37      actualChildProps={{ ...actualProps, dispatch }}
38    />
39  );
40};
41
42const connect = (mapStateToProps) => {
43  var store = window.store
44    ? window.store
45    : (window.store = createStore(reducers));
46  const storeData = store.getState();
47  let state = mapStateToProps(storeData);
48  let dispatch = store.dispatch;
49  return (component) => {
50    return () => {
51      return (
52        <ConnectFunction
53          component={component}
54          store={store}
55          mapStateToProps={mapStateToProps}
56          dispatch={dispatch}
57          state={state}
58        />
59      );
60    };
61  };
62};
63
64export default connect;

Copy 
1//数据处理器，纯函数
2var countReducer = (state = {}, action) => {
3  if (!action) return state;
4  const { count = 0 } = state;
5  console.log(action);
6  switch (action) {
7    case "INCREMENT":
8      return { ...state, count: count + 1 };
9    case "DECREMENT":
10      return { ...state, count: count - 1 };
11    default:
12      return { ...state, count };
13  }
14};
15export default {countReducer}

Copy 
1import React from "react";
2import connect from "./connect";
3
4const Page = function (props) {
5  const { count = 0, dispatch = () => {} } = props;
6  console.log("count", count);
7  return (
8    <>
9      <div id="counter">count:{count}</div>
10      <button
11        id="addBtn"
12        onClick={() => {
13          dispatch({ type: "countReducer/INCREMENT" });
14        }}
15      >
16        addBtn
17      </button>
18      <button
19        id="minusBtn"
20        onClick={() => {
21          dispatch({ type: "countReducer/DECREMENT" });
22        }}
23      >
24        minusBtn
25      </button>
26    </>
27  );
28};
29
30const connectedPage = connect(({ count }) => ({ count }))(Page);
31export default connectedPage;