r18中使用redux管理公共数据仓库怎么实现

在小型应用中，如何实现数据的共享。这里不考虑异步的数据交互，redux只能实现同步的数据更新，要实现异步必须借助其他的中间件。这篇不讨论，单只研究下在r18中redux的使用思路,为后面穿插其他的异步夯实基础。

实现效果

新建 Redux，创建数据仓库

• 根目录下面的 store 文件夹下面新建 CounterReducer.js

const initialState = {
    
    
  counter: 0,
  userInfo: {
    
    
    name: "John Doe",
    age: 25,
  },
};
function CounterReducer(state = initialState, action) {
    
    
  switch (action.type) {
    
    
    case "ADD":
      return {
    
     ...state, counter: state.counter + 1 };
    case "DEC":
      return {
    
     ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

export {
    
     CounterReducer };

• store 文件夹下面新建 index.js

import {
    
     createStore } from "redux";

import {
    
     CounterReducer } from "./CounterReducer";

let store = createStore(CounterReducer);

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

export default store;

组件内部使用 Redux

• 子组件 DemoA.js

import store from "../../store";
function DemoA() {
    
    
  const count = store.getState().counter;
  return (
    <div>
      <p> Demo A count: {
    
    count}</p>
    </div>
  );
}
export default DemoA;

• 子组件 DemoB.js

import store from "../../store";

function DemoB() {
    
    
  const {
    
     userInfo, counter } = store.getState();
  return (
    <div>
      <p>Demo B</p>
      <div>
        <span>name: {
    
    userInfo.name}</span> <br />
        <span>age: {
    
    userInfo.age}</span>
        <span>count:{
    
    counter}</span>
      </div>
      <button onClick={
    
    () => store.dispatch({
    
     type: "ADD" })}>add count</button>
    </div>
  );
}
export default DemoB;

• 父组件 index.js

import DemoA from "./DemoA";
import DemoB from "./DemoB";
import store from "../../store/index";
import {
    
     useEffect, useState } from "react";
function Redux() {
    
    
  const [counter, setCount] = useState(store.getState().counter);
  useEffect(() => {
    
    
    const unsubscribe = store.subscribe(() => {
    
    
      console.log("aaaa");
      setCount(store.getState().counter);
    });
    return () => {
    
    
      unsubscribe();
    };
  }, [counter]);
  return (
    <div>
      Redux
      <hr />
      parent count:{
    
    counter}
      <DemoA />
      <DemoB />
    </div>
  );
}

export default Redux;

总结

• createStore 创建一个仓库，这个仓库的参数是我们创建的一个个reducer,每个reducer里面有两个参数，一个初始状态state作为数据源，一个根据不同操作更新数据的action
• getState获取store中的所有数据状态
• dispatch是页面其他地方比如按钮，生命周期中，触发更新状态数据
• subscribe是在dispatch出发更新，订阅更新状态，获取最新的数据状态
• unsubscribe是subscribe返回值，用来在组件销毁时清除订阅，提升性能