Javascript 使用redux在渲染中切换使用条件存储

我的应用程序有两个方面，第一方面是客户端应用程序，第二方面是管理仪表板应用程序。为了让它干燥，我决定根据用户角色在提供者中传递存储，这样我就不必有两套路由器

class App extends Component {
  constructor(props) {
    super(props)

    this.role = getUserRole() //get role from localstorage
  }

  renderSwitchProvider = store => (
    <Provider store={store}>
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Redirect exact from="/" to="/dashboard" />
            <Auth path="/dashboard" component={Dashboard} />

            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
          </Switch>
        </div>
      </BrowserRouter>
    </Provider>
  )

  render() {
    if (this.role === 'member') {
      return this.renderSwitchProvider(store)
    } else if (this.role === 'admin') {
      return this.renderSwitchProvider(adminStore)
    }

    return null // problem is here
  }
}

export default App

---

问题可能来自

getUserRole（）

这是一个阻塞任务，返回null，并且角色不应为null

我的建议是使用

APP

组件来解析

getUserRole（）

中的值，并根据

getUserRole（）

的结果返回

Admin

或

User

组件

---

从

App

组件中删除redux应用商店实现，并将实现放在单个

Admin

或

User

组件中。

正如您所说，有两个方面

客户端

和

管理员

因此，您可以假定存储实现的默认值

假设，默认情况下，您总是希望加载

客户端

存储

那么渲染应该是,

render() {

    if (this.role === 'admin') {
      return this.renderSwitchProvider(adminStore)
    }else if(this.role === 'member'){

        return this.renderSwitchProvider(store)
    }



}

---

您从哪里获得

store

和

adminStore

？什么时候？那只是我的redux商店，通常你不会通过不同的商店，很可能每个应用只有一个商店，但我现在有两个应用。是的。我的问题是否为非空？@agent\u hunt更新了我的问题，添加到getUserRole函数中，用户注销后可以为空。但是将null传递给store将不起作用，这就是现在的问题。是的。这就是正在发生的事情。可以在

renderSwitchProvider

中调试空值是多少？问题不在

render

函数的末尾，但null正在传递给renderSwitchProviderI我知道问题所在，但是这个.role在用户登录后会有一些内容。如果我在client reducer中执行console.log（），即使我以管理员身份登录，我也可以看到触发器，这好吗，应该有

角色

值存在。这意味着你的

getUserRole

工作不正常当没有令牌时（用户注销后）返回未定义的yGetUserRole这将起作用，我将保留此解决方案，我考虑过了。如果你返回

{}

export function getUserRole() {
  return (
    localStorage.getItem('token') &&
    jwtDecode(localStorage.getItem('token')).role
  )
}

render() {

    if (this.role === 'admin') {
      return this.renderSwitchProvider(adminStore)
    }else if(this.role === 'member'){

        return this.renderSwitchProvider(store)
    }



}