reactjs - What is the best way to access redux store outside a react component?


Translate

@connect works great when I'm trying to access the store within a react component. But how should I access it in some other bit of code. For eg: let's say I want to use an authorization token for creating my axios instance that can be used globally in my app, what would be the best way to achieve that?

This is my api.js

// tooling modules
import axios from 'axios'

// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'

export default api

Now I want to access a data point from my store, here is what that would look like if I was trying to fetch it within a react component using @connect

// connect to store
@connect((store) => {
  return {
    auth: store.auth
  }
})
export default class App extends Component {
  componentWillMount() {
    // this is how I would get it in my react component
    console.log(this.props.auth.tokens.authorization_token) 
  }
  render() {...}
}

Any insights or workflow patterns out there?


All Answers
  • Translate

    Export the store from the module you called createStore with. Then you are assured it will both be created and will not pollute the global window space.

    MyStore.js

    const store = createStore(myReducer);
    export store;
    

    or

    const store = createStore(myReducer);
    export default store;
    

    MyClient.js

    import {store} from './MyStore'
    store.dispatch(...)
    

    or if you used default

    import store from './MyStore'
    store.dispatch(...)
    

    For Multiple Store Use Cases

    If you need multiple instances of a store, export a factory function. I would recommend making it async (returning a promise).

    async function getUserStore (userId) {
       // check if user store exists and return or create it.
    }
    export getUserStore
    

    On the client (in an async block)

    import {getUserStore} from './store'
    
    const joeStore = await getUserStore('joe')
    

  • Translate

    Found a solution. So I import the store in my api util and subscribe to it there. And in that listener function I set the axios' global defaults with my newly fetched token.

    This is what my new api.js looks like:

    // tooling modules
    import axios from 'axios'
    
    // store
    import store from '../store'
    store.subscribe(listener)
    
    function select(state) {
      return state.auth.tokens.authentication_token
    }
    
    function listener() {
      let token = select(store.getState())
      axios.defaults.headers.common['Authorization'] = token;
    }
    
    // configuration
    const api = axios.create({
      baseURL: 'http://localhost:5001/api/v1',
      headers: {
        'Content-Type': 'application/json',
      }
    })
    
    export default api
    

    Maybe it can be further improved, cause currently it seems a bit inelegant. What I could do later is add a middleware to my store and set the token then and there.


  • Translate

    You can use store object that is returned from createStore function (which should be already used in your code in app initialization). Than you can use this object to get current state with store.getState() method or store.subscribe(listener) to subscribe to store updates.

    You can even save this object to window property to access it from any part of application if you really want it (window.store = store)

    More info can be found in the Redux documentation .


  • Translate

    Seems like Middleware is the way to go.
    Refer the official documentation and this issue on their repo


  • Translate

    Like @sanchit proposed middleware is a nice solution if you are already defining your axios instance globally.

    You can create a middleware like:

    function createAxiosAuthMiddleware() {
      return ({ getState }) => next => (action) => {
        const { token } = getState().authentication;
        global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;
    
        return next(action);
      };
    }
    
    const axiosAuth = createAxiosAuthMiddleware();
    
    export default axiosAuth;
    

    And use it like this:

    import { createStore, applyMiddleware } from 'redux';
    const store = createStore(reducer, applyMiddleware(axiosAuth))
    

    It will set the token on every action but you could only listen for actions that change the token for example.


  • Translate

    For TypeScript 2.0 it would look like this:

    MyStore.ts

    export namespace Store {
    
        export type Login = { isLoggedIn: boolean }
    
        export type All = {
            login: Login
        }
    }
    
    import { reducers } from '../Reducers'
    import * as Redux from 'redux'
    
    const reduxStore: Redux.Store<Store.All> = Redux.createStore(reducers)
    
    export default reduxStore;
    

    MyClient.tsx

    import reduxStore from "../Store";
    {reduxStore.dispatch(...)}
    

  • Translate

    An easy way to have access to the token, is to put the token in the LocalStorage or the AsyncStorage with React Native.

    Below an example with a React Native project

    authReducer.js

    import { AsyncStorage } from 'react-native';
    ...
    const auth = (state = initialState, action) => {
      switch (action.type) {
        case SUCCESS_LOGIN:
          AsyncStorage.setItem('token', action.payload.token);
          return {
            ...state,
            ...action.payload,
          };
        case REQUEST_LOGOUT:
          AsyncStorage.removeItem('token');
          return {};
        default:
          return state;
      }
    };
    ...
    

    and api.js

    import axios from 'axios';
    import { AsyncStorage } from 'react-native';
    
    const defaultHeaders = {
      'Content-Type': 'application/json',
    };
    
    const config = {
      ...
    };
    
    const request = axios.create(config);
    
    const protectedRequest = options => {
      return AsyncStorage.getItem('token').then(token => {
        if (token) {
          return request({
            headers: {
              ...defaultHeaders,
              Authorization: `Bearer ${token}`,
            },
            ...options,
          });
        }
        return new Error('NO_TOKEN_SET');
      });
    };
    
    export { request, protectedRequest };
    

    For web you can use Window.localStorage instead of AsyncStorage