Is it good way to share store across app solution?

[Jenan]

Here redux-oidc-example/src/utils/request.js is example how get the access token from redux store and the redux store is shared in import:

Is it good way to do this? Could be better pass the access token like a parameter and connect the oidc key into component?

Thanks for your opinion. :)

import store from '../store';

// a request helper which reads the access_token from the redux state and passes it in its HTTP request
export default function apiRequest(url, method = 'GET') {
  const token = store.getState().oidc.user.access_token;
  const headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Authorization', `Bearer ${token}`);

  const options = {
    method,
    headers
  };

  return fetch(url, options)
    .then((res) => res.json())
    .then((data) => ({data}))
    .catch((error) => ({ error }));
}

Token pass as paramater:

// a request helper which reads the access_token from the redux state and passes it in its HTTP request
export default function apiRequest(url, method = 'GET', token) {
  const headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Authorization', `Bearer ${token}`);

  const options = {
    method,
    headers
  };

  return fetch(url, options)
    .then((res) => res.json())
    .then((data) => ({data}))
    .catch((error) => ({ error }));
}

And in component use connect method with:

function mapStateToProps(state) {
  return {
    token: oidc.user.access_token
  };
}

Pass the access token from component into action creator and call the api with this paramater.

[maxmantz]

sure, your idea would also work just fine.

[Jenan]

@maxmantz I have a question about JWT - I've used the server rendering for react&redux app and I've wondered if is safe render JWT into html hidden field and read this token from hidden field? What do you think about rendering JWT into HTML hidden input?

[maxmantz]

Why do you want to do that?

[Jenan]

I have a JWT token store in cookie on the server and I want to use the redux and react rendered from server because it's faster in initial application start. If I want to render react-redux app from server the way for passing the data from server to the client it is pass like this:

    <script type="text/javascript">

        window.__initialState__ =  @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings
        {
                               NullValueHandling = NullValueHandling.Ignore
        }));

    </script>

const store = createStore(combineReducers({
    app: commonReducer
}), (window as any).__initialState__ ,applyMiddleware(logger));

Render JWT into window.__initialState__ like this?

What do you think about it?

[maxmantz]

It seems a little complicated to me, but if it works for you, then sure, go ahead...

[maxmantz]

I'm happy to help with questions about the usage of this library. But please understand that I'm not a consultant and don't have the time and resources to answer questions beyond that.