2

I have an app that have different access level, like admin, guest and normal user, so it has several roles. My folder structure is very clear, some components are shared like Button, Loader but reducers and actions are not shared, because they are completely different of apps.

I did this to do conditioning setting for my store (Yes I only need one store because the entry for all type of the user is the same)

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { getUserRole } from './utils' // merely localstorage util to get roles
import { composeWithDevTools } from 'redux-devtools-extension'

import userReducers from './reducers'
import adminReducers from './reducers/admin'

//share reducer btw member and admin
let reducers
if (getUserRole() === 'member') {
  reducers = userReducers
} else {
  reducers = adminReducers
}

console.log('reducers', reducers) //undefined during the first load, most likely store is done setup before localstorage?

const store = createStore(
  reducers,
  composeWithDevTools(
    applyMiddleware(thunk)
  )
)
export default store

The problem is reducers is undefined unless I refresh the entire page.

Hoknimo
  • 533
  • 2
  • 6
  • 15

1 Answers1

1

Maybe the problem is that localStore is not async according to this SO answer.

So by returning a Promise you'll make sure getUserRole() is not undefined:

export function getUserRole(){
    return new Promise((resolve, reject) => {
         let role = localStorage.getItem('token').decode('role')
         resolve(role)
    })
}

and in index.js:

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { getUserRole } from './utils' // merely localstorage util to get roles
import { composeWithDevTools } from 'redux-devtools-extension'

import userReducers from './reducers'
import adminReducers from './reducers/admin'

//share reducer btw member and admin
let store
getUserRole().then(role => {
   reducers =  role === 'member'
   ? userReducers
   : adminReducers
   console.log('reducers', reducers) 
   store =  createStore(
       reducers,
       composeWithDevTools(
           applyMiddleware(thunk)
       )
   )
})

export default store

Tell me if something went wrong.

StackedQ
  • 3,999
  • 1
  • 27
  • 41
  • I got this error `Could not find "store" in either the context or props of "Connect(Auth)". `https://pastebin.com/CfDPJh0T – Hoknimo Aug 11 '18 at 11:06
  • What did you change? I don't see the changes – Hoknimo Aug 11 '18 at 11:31
  • changed `localstorage.get('token').decode('role')` to `localStorage.getItem('token').decode('role')` – StackedQ Aug 11 '18 at 11:39
  • there is no problem at the async part just that it won't work like you did, I still got `Could not find "store" in either the context or props of "Connect(Auth)" ` because `` can't wait for the store. – Hoknimo Aug 11 '18 at 11:41
  • you can try to create a demo and you will see the issue. – Hoknimo Aug 11 '18 at 11:41