redux教程，通过redux，react如何和外部做到数据互通？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

redux独立使用

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

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

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

外部js访问数据

可以随时查看数据：

store.getState();

也可以订阅状态变化：

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

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

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

react内访问数据

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

• https://newsn.net/say/redux-useselector.html

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>
  );
}

测试例子

基于webpack搭建自己的环境，

• https://newsn.net/say/webpack-react-diy.html

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

• https://newsn.net/say/redux-slice-2.html

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;

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>
);

运行结果：

相关文章

• https://newsn.net/say/react-with-html.html
• https://newsn.net/say/webpack-react-diy.html
• https://newsn.net/say/redux-slice.html
• https://newsn.net/say/redux-slice-2.html

综述

更多redux的经验文章，请参考：

• https://newsn.net/tag/redux/
• https://newsn.net/tag/react/

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