import { createStore, combineReducers, applyMiddleware } from "redux";
// 初始化状态集合
const store = createStore(// 合并 reducercombineReducers({ counter: counterReducer, other: otherReducer }),// 引入中间件applyMiddleware(logger)
);

import { render } from "react-dom";
import { Provider } from "react-redux";render(<Provider store={store}><App /></Provider>,document.getElementById("app")
);

// 初始 state
const INITIAL_STATE = {step: 0,
};// 抽离对外暴露的行为枚举
export const counterActionEnum = {step: "step",reset: "reset",
};// 定义 reducer 不同行为下的不同 state 处理
export default function counterReducer(state = INITIAL_STATE, action) {console.log("reducer@", state, action, INITIAL_STATE);switch (action.type) {case counterActionEnum.step:return {step: state.step + 1,};case counterActionEnum.reset:return {...INITIAL_STATE,};default:return state;}
}

import React from "react";
import { connect } from "react-redux";
import { counterActionEnum } from "../reducers/counter";function Counter(props) {const { counter, doStep, doReset } = props;return (<div><span>计步器：{counter.step}</span><button onClick={() => doStep()}>计步</button><button onClick={() => doReset()}>重置</button></div>);
}// 链接 reducer 与 Counter
export default connect(// mapStateToProps 将 state 映射到组件的 props 中(state) => ({ counter: state.counter }),// mapDispatchToProps 将 dispatch 转发后的 action 映射到组件的 props 中(dispatch) => ({// 通过 dispatch 触发行为doStep: () => dispatch({ type: counterActionEnum.step }),doReset: () => dispatch({ type: counterActionEnum.reset }),})
)(Counter);

// 自定义中间件规则
const logger = ({ dispatch, getState }) => (next) => (action) => {console.log("[logger before]:", action);// 执行下一个 dispatchconst result = next(action);console.log("[logger after]:", action, getState());return result;
};// ...
// 初始化 store 时引入 logger middleware
const store = createStore(// 合并 reducercombineReducers({ counter: counterReducer, other: otherReducer }),// 引入中间件applyMiddleware(logger)
);

[logger before]: {type: "step"}
// dispatch action
reducer@ {step: 0} {type: "step"} {step: 0}
[logger after]: {type: "step"} {counter: {…}}

function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => (next) => (action) => {// 劫持 action，对 action 提供了扩展，在扩展中自己去实现异步if (typeof action === "function") {return action(dispatch, getState, extraArgument);}return next(action);};
}const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;export default thunk;

function mapDispatchToProps(dispatch) {return {// 通过 dispatch 触发行为doStep: () => {// 1s 后执行 actionsetTimeout(() => {dispatch({ type: counterActionEnum.step });}, 1000);},doReset: () => dispatch({ type: counterActionEnum.reset }),};
}

import { observable, action } from "mobx";class CounterStore {@observable step = 0;@actiondoStep = () => {this.step++;};@actiondoReset = () => {this.step = 0;};
}// 抛出一个实例
export default new CounterStore();

<Provider counterStore={counterStore}><div><h1>mobx 计步器</h1><CounterApp /></div>
</Provider>

// 将 counterStore 混入到 Counter 的 props 中
const CounterApp = inject("counterStore")(observer(Counter));

function Counter({ counterStore }) {const { step, doStep, doReset } = counterStore;return (<div><span>计步器：{step}</span>{"  "}<button onClick={() => doStep()}>计步</button>{"  "}<button onClick={() => doReset()}>重置</button></div>);
}