javascript - React 和 Redux 丢失状态

Question

希望你们一切都好。我是 React redux 世界的新手。我正在学习和从事通话记录项目。我有几个问题，如果有人可以指导我是否做错了或者告诉我替代方案，那就太好了。

我正在使用 JWT 对用户进行身份验证。验证用户详细信息后。我正在调度成功操作，在 reducer 中，我将状态设置为经过身份验证的 true 和响应。我还将 token 和过期时间存储在 localStorage 中

在索引文件的根文件中。我正在检查 token 是否存在于 localStorage 中，如果存在，则调度登录操作。

一切正常。但是我正在丢失其他值，例如来自服务器的响应。当他第一次登录时。我该如何解决这个问题？

其次，右上角有一个用户初始图标。当用户登录时我得到了初始值，它被存储在授权状态。它工作正常，但如果我再次刷新页面，它会变为空，我会丢失初始值。

所以我尝试了另一种方式并将初始存储在 localStorage 中。但是导航栏已经呈现在屏幕上，在刷新页面之前我看不到任何首字母。

我在 mapStateToProps 中传递了新键。 ii 并将 localStorage 的初始值存储在其中并且工作正常。这是一种有效的方法吗？？？

问候 见面

            const  SignedInLinks  = (props) => {                                                      
            return (
                <ul  className="right">
                    <li><NavLink  to="/signin"  onClick=        
                    {props.signOut}>Log Out</NavLink></li>
                    <li><NavLink  className="btn btn-floating pink lighten-1"  to="/">
                    {props.ii  ?  props.ii  :  null  }
                    </NavLink></li>
            </ul>
            )}

            const  mapStateToProps  =  state  => {
                return {
                    auth:  state.auth,
                    ii:  window.localStorage.getItem('ui')
                }
            }
            export  default  connect(mapStateToProps, { signOut })(SignedInLinks);

Answer 1

与其在 mapStateToProps 中使用 localStorage，不如在你的 reducer 中初始化与该状态对应的 ii 状态，然后通过mapStateToProps。像这样。

const iiReducer = (state = window.localStorage.getItem('ui') || false, action) => {
  /*.
  .
  . Other Logic
  .
  .*/
  return state
}

然后像在商店状态下一样正常使用它

const  mapStateToProps  =  state  => {
    return {
        auth: state.auth,
        ii: state.ii
    }
}

希望对您有所帮助!