CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Giuseppe Fantoni
Giuseppe Fantoni

Reputation: 333

How i access redux store outside a react component?

In my Store.js file i have that code:

export const INSERIR_USUARIO = 'app/login/INSERIR_USUARIO';

export const INITIAL_STATE = {
  usuario: null,
};

export default function reducer(state = INITIAL_STATE, action = {}) {
  if (action.type === INSERIR_USUARIO) {
    return {
      ...state,
      usuario: action.payload,
    };
  }
  return state;
}

export const attUser = (usuario) => ({
  type: INSERIR_USUARIO,
  payload: usuario,
});

Now, in my login.js file, i need to access the function "attUser". I imported the function but I don't know if it is being called. But in redux is not saving

import { attUser } from './Store';
export const saveToken = () => {
  attUser({ name: 'a', age: '13' });
};

How do I insert this item in redux outside of a react component?

Upvotes: 0

Views: 145

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84982

export const attUser = (usuario) => ({
  type: INSERIR_USUARIO,
  payload: usuario,
});

attUser is an action creator. It creates a small object describing what to do, but otherwise doesn't cause any actual change. To have an effect, you then need to dispatch this action. You didn't show the line where you actually create the store, but assuming the store variable is named store, you'll do:

store.dispatch(attUser({ name: 'a', age: '13' }))

For more on dispatching actions, see this page.

P.S: you specifically asked about how to do this outside of react, so that's what i gave as an example. If a react component needs to do this dispatching, you should use the techniques in react-redux (useDispatch for function components, mapDispatchToProps for class components)

Upvotes: 2

Related Questions