redux例子

redux同步例子

// App.js
import React from "react";
import ReduxPage from "./pages/ReduxPage.js";

function App() {
  return (
    <div className="App">
      <ReduxPage />
    </div>
  );
}

export default App;

// store/index.js
import { createStore } from "redux";
// 定义修改规则
function countReducer(state = 0, action) {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "MINUS":
      return state - 1;
    default:
      return state;
  }
}
const store = createStore(countReducer);
export default store;

// pages/ReduxPage.js
import React, { Component } from "react";
import store from "../store/index";

export default class ReduxPage extends Component {
  componentDidMount() {
      // 订阅
    store.subscribe(() => {
      this.forceUpdate();
    });
  }
  add = () => {
      // 派发 
    store.dispatch({ type: "ADD" });
  };
  minus = () => {
    store.dispatch({ type: "MINUS" });
  };
  render() {
      // 获取数据
    return (
      <div>
        <h3>ReduxPage</h3>
        <p>{store.getState()}</p>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    );
  }
}

redux的dispatch只支持传入对象，若想实现更复杂的内容，如传入函数，实现异步操作，请求接口获取数据等，可以选择借助中间件增强其功能，如redux-thunk

// store/index.js
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
// 定义修改规则
function countReducer(state = 0, action) {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "MINUS":
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(countReducer, applyMiddleware(thunk, logger));
export default store;

// ReduxPage.js
import React, { Component } from "react";
import store from "../store/index";

export default class ReduxPage extends Component {
  componentDidMount() {
    store.subscribe(() => {
      this.forceUpdate();
    });
  }
  add = () => {
    store.dispatch({ type: "ADD" });
  };
  minus = () => {
    store.dispatch({ type: "MINUS" });
  };
  asyAdd = () => {
    store.dispatch((dispatch) => {
      console.log("123");
      setTimeout(() => {
        dispatch({ type: "ADD" });
      }, 1000);
    });
  };

  render() {
    return (
      <div>
        <h3>ReduxPage</h3>
        <p>{store.getState()}</p>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
        <button onClick={this.asyAdd}>asyAdd</button>
      </div>
    );
  }
}

ps：感谢&参考 各路大神