如何从基于React和Redux的npm库中暴露Actions？

下面是几种适配你场景的实现方案，兼顾隔离性和易用性：

1. 封装独立的Redux Store实例（最推荐） #

为工具库创建专属的Redux Store，彻底隔离和使用者全局Store的状态冲突，同时直接对外暴露Action Creator和状态访问方法。

工具库内部实现 #

// src/store.js
import { createStore, combineReducers } from 'redux';
import toolReducer from './reducers/toolReducer';

// 创建工具库专属的Store实例
const toolStore = createStore(combineReducers({
  core: toolReducer
}));

export default toolStore;

// src/actions.js
export const addToolData = (data) => ({
  type: 'ADD_TOOL_DATA',
  payload: data
});

// src/index.js
import toolStore from './store';
import { addToolData } from './actions';
import ToolComponent from './components/ToolComponent';

// 对外暴露核心API
export {
  ToolComponent,
  addToolData,
  getToolState: () => toolStore.getState().core
};

开发者使用示例 #

import { addToolData, ToolComponent } from 'your-npm-tool';

const UserPage = () => {
  const handleAdd = () => {
    // 直接调用工具库暴露的Action Creator
    addToolData({ id: Date.now(), content: '新增数据' });
  };

  return (
    <div>
      <button onClick={handleAdd}>给工具加数据</button>
      <ToolComponent />
    </div>
  );
};

这种方案无需开发者额外配置，开箱即用，状态完全隔离，不会干扰开发者自身的Redux环境。

2. 允许开发者集成工具库Reducer到自身Store #

如果开发者本身已在项目中使用Redux，可让其将你的Reducer合并到全局Store，通过他们自己的dispatch触发Action。

工具库对外暴露内容 #

// src/index.js
import toolReducer from './reducers/toolReducer';
import { addToolData } from './actions';
import ToolComponent from './components/ToolComponent';

export {
  ToolComponent,
  addToolData,
  toolReducer
};

开发者集成示例 #

// 开发者的Store配置
import { combineReducers, createStore } from 'redux';
import { toolReducer } from 'your-npm-tool';
import appReducer from './reducers/appReducer';

const rootReducer = combineReducers({
  app: appReducer,
  // 合并工具库的Reducer到全局状态
  tool: toolReducer
});

const store = createStore(rootReducer);

// 开发者的组件
import { useDispatch } from 'react-redux';
import { addToolData } from 'your-npm-tool';

const UserComponent = () => {
  const dispatch = useDispatch();

  const handleAdd = () => {
    // 用自身项目的dispatch触发工具库的Action
    dispatch(addToolData({ id: 1, content: '全局联动数据' }));
  };

  return <button onClick={handleAdd}>添加数据</button>;
};

该方案适合需要状态全局联动的场景，但需要开发者手动完成集成，需在工具库文档中明确说明步骤。

3. 用Redux Toolkit简化封装（现代项目首选） #

如果你的工具库基于Redux Toolkit开发，可大幅简化代码，同时自动处理immer、Action类型生成等细节：

工具库内部实现 #

// src/slices/toolSlice.js
import { createSlice } from '@reduxjs/toolkit';

const toolSlice = createSlice({
  name: 'tool',
  initialState: { dataList: [] },
  reducers: {
    addToolData: (state, action) => {
      state.dataList.push(action.payload);
    }
  }
});

export const { addToolData } = toolSlice.actions;
export default toolSlice.reducer;

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import toolReducer from './slices/toolSlice';

export const toolStore = configureStore({
  reducer: {
    core: toolReducer
  }
});

// src/index.js
import { toolStore } from './store';
import { addToolData } from './slices/toolSlice';
import ToolComponent from './components/ToolComponent';

export {
  ToolComponent,
  addToolData,
  getToolState: () => toolStore.getState().core
};

开发者使用方式和第一种方案一致，但代码更简洁，维护成本更低。

内容的提问来源于stack exchange，提问作者escplat12