redux2 - 原生html页面和react中使用自己手写的 - redux

最新推荐文章于 2024-07-25 16:39:57 发布

素燃

最新推荐文章于 2024-07-25 16:39:57 发布

阅读量284

点赞数

分类专栏： redux 文章标签： redux

总结不易，转载请说明出处哦!

本文链接：https://blog.csdn.net/qq_36407748/article/details/106467669

版权

redux 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原生html页面中

redux.js

// 创建仓库
function createStore(reducer) {
  let currData;
  let listeners = [];
  const getState = () => currData;
  const dispatch = (action) => {
    currData = reducer(currData, action);
    listeners.forEach((fn) => fn());
  };
  const subscribe = (listener) => {
    listeners.push(listener);
    return function () {
      listeners = listeners.filter((fn) => fn !== listener);
    };
  };
  dispatch({ type: '@@_REDUX' });
  return {
    getState,
    dispatch,
    subscribe,
  };
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="h1"></h1>
    <button id="add">+</button>
    <button id="shortened">-</button>
  </body>
  <script src="./redux.js"></script>
  <script>
  	// 获取到dom元素
    let h1 = document.getElementById('h1');
    let addBtn = document.getElementById('add');
    let shortenedBtn = document.getElementById('shortened');
    // 创建type
    const ADD = 'ADD';
    const SHORTENED = 'SHORTENED';
    // 创建reucer
    function reducer(state = { num: 0 }, action) {
      switch (action.type) {
        case ADD:
          return { num: state.num + 1 };
        case SHORTENED:
          return { num: state.num - 1 };
        default:
          return state;
      }
    }
    // 创建store 仓库
    let store = createStore(reducer);
    // 渲染视图
    function render() {
      h1.innerHTML = store.getState().num;
    }
    render();
    // 监听数据
    store.subscribe(render);
    // 添加事件
    addBtn.addEventListener('click', () => store.dispatch({ type: ADD }));
    shortenedBtn.addEventListener('click', () =>
      store.dispatch({ type: SHORTENED }),
    );
  </script>
</html>

在react 组件中使用

redux/createStore.js

export default function createStore(reducer) {
  let currData;
  let listeners = [];
  function getState() {
    return currData;
  }
  function dispatch(action) {
    currData = reducer(currData, action);
    listeners.forEach((fn) => fn());
  }
  dispatch({ type: '@@_REDUX' });
  function subscribe(listener) {
    listeners.push(listener);
    return function () {
      listeners =  listeners.filter((fn) => fn !== listener);
    };
  }
  return {
    getState,
    dispatch,
    subscribe,
  };
}

redux/index.js

import createStore from './createStore';
export { createStore };

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from './redux';

// 初始数据
let initData = {
  num: 10,
};
// type 类型
const ADD = 'ADD';

// 创建reducer
function reducer(state = initData, action) {
  switch (action.type) {
    case ADD:
      return {
        num: state.num + 1,
      };
    default:
      return state;
  }
}
// 创建数据源
let store = createStore(reducer);

// 解构出数据
const { num } = store.getState();

class App extends Component {
  state = {
    num,
  };
  componentDidMount() {
    // 订阅数据
    this.unSubscribe = store.subscribe(() =>
      this.setState({
        num: store.getState().num,
      }),
    );
  }
  componentWillUnmount() {
    // 取消订阅
    this.unSubscribe();
  }
  render() {
    return (
      <div>
        <p>{this.state.num}</p>
        <button onClick={() => store.dispatch({ type: ADD })}>+</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));