如何在 React 中的组件外部访问 Redux 存储

Question

我从 Redux 开始，我总是在带有 connect() 和 mapStateToProps() 的组件中使用它，但现在我想每隔 x 次使用 setInterval() 调用我的 API，以检查服务器是否有未存储在 Redux 存储中的新数据，并替换它。

我的方法是创建一个读取存储并更新它的函数，如下所示：

import { store } from './dir/dir/store.js'

const refresher = async () => {

    const state = store.getState();

    // Call API, compare 'state.calendar' with calendar from server
    // Call store.dispatch() if they are different, then update Redux store

}

export default refresher

我的问题是：

• 这是使用 Redux 的好习惯吗？
• 有没有更好的方法来解决这个问题？

谢谢

Answer 1

导出商店并在普通 js/ts 文件中使用是完全可以的。

Redux 存储示例

确保您创建export的store

import { configureStore } from "@reduxjs/toolkit";
import { slice } from "../features/counterSlice";

export const store = configureStore({
  reducer: {
    counter: slice.reducer
  }
});

在非组件代码中的用法：

然后您可以在任何其他代码中import创建store

import { store } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function getCount(): number {
  const state = store.getState();
  return state.counter.value;
}

export function incrementCount() {
  store.dispatch(counterSlice.actions.increment());
}

功能组件中的传统用法

import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function Clicker() {
  const dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatchIncrement = () => dispatch(counterSlice.actions.increment())
  // ...

示例切片

import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    }
  }
});

Codesandbox 中的演示

注意：您不能将此选项与服务器端渲染一起使用。如果需要支持SSR，可以使用中间件来监听分派的action并在其他地方处理。

进一步阅读

• 在 React 组件之外访问 redux 存储的最佳方法是什么？| 堆栈溢出
• 在 React 组件之外访问 Redux Store | 博客
• 如何在非反应组件中访问商店？| Github 问题