如何访问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，您可以使用中间件来监听调度的操作并在其他地方进行处理。

进一步阅读

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

Answer 2

在这里，您可以访问react native中任何组件(如index.js文件(之外的存储和操作。

import {updateLocationAlertItem} from './src/store/actions/locationAlertAction';
import {store} from './src/store/index';
store.subscribe(listener);
function listener() {
state = store.getState().locationAlertReducer;
}

store.dispatch(
updateLocationAlertItem({
index: index,
is_in_radius: true,
is_notification: true,
arrival_time: moment().format('DD/MM/YYYY hh:mm'),
exit_time: item.exit_time,
}),
);