Tengo una aplicación React con Redux y Redux Toolkit. Hasta ahora, solo usaba código relacionado con redux en los componentes de React usando useDispatch y useSelector .
Ahora quiero actualizar la tienda Redux desde un módulo de JavaScript puro. El módulo real guarda los datos del usuario (notas, recompensas, por ejemplo) en un IndexedDB. También me gustaría actualizar mi tienda redux desde este módulo. Sin embargo, como no es un componente de React, no puedo usar useDispatch .
He creado una slice como esta:
const initialState = { rewards: [] }; export const rewardSlice = createSlice({ name: 'reward', initialState: initialState, reducers: { setRewards: (state, action) => { state.rewards = action.payload.rewards; }, addReward: (state, action) => { state.rewards = [action.payload.reward, ...state.rewards]; }, }, }); export const { setRewards, addReward } = rewardSlice.actions; export default rewardSlice.reducer;Y lo que quiero es el equivalente de este código sin usar ganchos de reacción:
const dispatch = useDispatch(); dispatch(addReward({ reward: userReward }));Si tiene un archivo configStore.js o similar donde ha usado configureStore() , puede usar la constante asignada usando este método e importar en el archivo donde necesita llamar a la función dispatch()
por ejemplo, suponiendo que sus reductores estén configurados en una constante exportada llamada store :
//Assuming the file name is configStore.js and //configureStore is assigned to store import {configureStore} from '@reduxjs/toolkit'; export default store = configureStore({ reducer: persistedReducer, middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: { ignoredActions: [ FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, ], }, }), }); ahora en el archivo donde necesita dispatch() para almacenar, simplemente importe store . Y luego desestructurar a partir de ella la función de despacho.
import store from './path_to/configStore'; . . . const {dispatch} = store; dispatch(addReward({ reward: userReward }));