我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在很久之前的一篇文章中,苏南大叔曾经提出一个问题。react如何和外部页面做到数据互通。当时得出的结论是:可以互通,但是不推荐这么做。目前,这个问题再加上redux这个跨界产物的话。数据互通似乎是很容易的事情了。唯一麻烦的事情就是:要搭建webpack环境... 这其实很糟心...

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - redux-connect
redux教程,通过redux,react如何和外部做到数据互通?(图6-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react和普通的html页面,通过redux数据互通的方式。本文测试环境:win10node@16.14.2webpack@5.74.0webpack-cli@4.10.0webpack-dev-server@4.9.3react@18.2.0react-dom@18.2.0babel-loader@8.2.5@babel/core@7.18.9@babel/preset-env@7.18.9@babel/preset-react@7.18.6reduxjs/toolkit@1.8.3react-redux@8.0.2chrome@103.0.5060.53redux-devtools-extension@3.0.11

redux独立使用

正如redux官网描述的一样,reduxreact并不是紧密绑定在一起的。redux可以和reactvue等一起使用,也可以单独使用。那么,在redux的第二个例子里面,大家可以看到,redux可以独立使用,其核心就是store。参考文章:
https://newsn.net/say/redux-toolkit.html

那么,两者相互访问的理论基础就是共用一个store。把react中的store暴露到window.层面上,把sliceactions也暴露出到window.层面上。

window.store= store;
window.need = need;

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - 目录结构
redux教程,通过redux,react如何和外部做到数据互通?(图6-2)

外部js访问数据

可以随时查看数据:

store.getState();

也可以订阅状态变化:

store.subscribe(() => console.log(store.getState()))

还可以执行改变数据的函数:

import { need } from './slice';
window.need = need;
store.dispatch(need("球鞋"));

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - 外部调用
redux教程,通过redux,react如何和外部做到数据互通?(图6-3)

react内访问数据

无状态组件使用useSelector获得数据,还可以随时列出数据。react进化到无状态组件后,可以使用useSelector访问到reduxstate。而这个state也是储存在store里面的。参考文章:

import { useSelector, useDispatch } from 'react-redux';
export function Counter() {
  //...
  const _list = useSelector(get_list);
  const _items = _list.map((name,key) =>  
    <li key={key}>{name}</li>
  );
  return (
    <ul>{_items}</ul>
  );
}

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - 内部调用
redux教程,通过redux,react如何和外部做到数据互通?(图6-4)

测试例子

基于webpack搭建自己的环境,

测试的例子是基于多个slice的文章改编:

slice.js:

import { createSlice } from '@reduxjs/toolkit';
export const me = createSlice({
  name: 'me',
  initialState :{
    has: [],
  },
  reducers: {
    need : (state, action) => {
      let what = action.payload;
      if(what == ""||what==undefined){
        what = Math.round(Math.random()*100) + "号商品";
      }
      state.has.push(what);
    }
  },
});
export const get_list = (state) => state.sunan.has;
export const reducer_1 = me.reducer;
export const { need } = me.actions;

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - slice定义
redux教程,通过redux,react如何和外部做到数据互通?(图6-5)

index.js

// ####################################################
// 定义store
import { configureStore } from '@reduxjs/toolkit';
import { need, get_list, reducer_1 } from './slice';
export const store = configureStore({
  reducer: {
    sunan: reducer_1,
  },
});
// ####################################################
// 外部调用
store.subscribe(() => console.log(store.getState()))
window.store= store;
window.need = need;
// store.dispatch(need("球鞋"));
// ####################################################
// react调用
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
const root = createRoot(document.getElementById('root'));
import { useSelector, useDispatch } from 'react-redux';
export function Counter() {
  const dispatch = useDispatch();
  const _list = useSelector(get_list);
  const _items = _list.map((name,key) =>  
    <li key={key}>{name}</li>
  );
  return (
    <div>
      <button onClick={() => dispatch(need())}>
        买个东西
      </button>
      <ul>{_items}</ul>
    </div>
  );
}
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Counter/>
    </Provider>
  </React.StrictMode>
);

运行结果:

苏南大叔:redux教程,通过redux,react如何和外部做到数据互通? - 运行结果
redux教程,通过redux,react如何和外部做到数据互通?(图6-6)

相关文章

综述

更多redux的经验文章,请参考:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    redux