React redux store 的状态未保存答案

【问题标题】：React redux store's state not savedReact redux store 的状态未保存
【发布时间】：2020-09-15 21:58:27
【问题描述】：

我用 redux 创建了一个商店来试验应用程序状态管理。到目前为止，我只是在单击登录页面上的“登录”按钮时尝试做出虚假的身份验证行为，这是因为我的 isLogged 状态更改为 true。但是当我尝试通过检查 isLogged 是否为真来访问我保护的路径时，我得到了假...为什么在使用 react-router_dom 路由时没有保存 isLogged 的状态？

index.js

const store = createStore(
allReducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
<React.StrictMode>
    <Provider store={store}>
        <App/>
    </Provider>
</React.StrictMode>,
document.getElementById('root')
);

App.js

class App extends Component {
render() {
    return (
        <Box style={{width: "99.6vw", height: "95.6vh"}}>
            <Router>
                <SideNavBar/>
                <Switch>
                    <Route exact path={"/"} render={() => <Redirect to={"/login"}/>}/>
                    <Route path={"/login"} component={LoginPage}/>
                    <ProtectedRoute path={"/somepage"} component={somePage}/>
                </Switch>
            </Router>
        </Box>
    );
}
}

LoginPage.js

class LoginPage extends Component {
render() {
    const {dispatch} = this.props;

    return (
        <LoginPageContainer>
            <img src={logo} alt={""} height={"350rem"}/>
            <FilledInput placeholder={"Login or email"}/>
            <FilledInput placeholder={"Password"}/>
            <Button onClick={() => dispatch({ type: "SIGN_IN" })}>
                Sign in
            </Button>
        </LoginPageContainer>
    );
}
}

export default connect(null, null)(LoginPage);

ProtectedRoute.js

import {connectProtectedRoute as connect} from "../redux/connectProtectedRoute";

class ProtectedRoute extends Component {
render() {
    const {isLogged, component} = this.props;

    return (
        <Route render={
            () => {
                if (isLogged)
                    return (component);
                else
                    return (<Redirect to={"/login"}/>);
            }
        }/>
    );
}
}


ProtectedRoute.propTypes = {
component: PropTypes.elementType.isRequired
};

export default connect(ProtectedRoute);

connectProtectedRoute.js

import {connect} from "react-redux";

function mapStateToProps(state) {
return ({
    isLogged: state.isLogged
});
}

export const connectProtectedRoute = connect(mapStateToProps, null);

reducers.js

const allReducers = combineReducers({
isLogged: isLoggedReducer
});

export default allReducers;

isLoggedReducer.js

const isLoggedReducer = (state = false, action) => {
switch (action.type) {
    case "SIGN_IN": return true;
    case "SIGN_OUT": return false;
    default: return state;
}
}

export default isLoggedReducer;

【问题讨论】：

如果您的问题与 redux 商店有关，您不认为包含您的 reducer 会有所帮助吗？
你应该将 ProtectedRoute 组件连接到 redux store。
是连接的，我没有提到它，因为我认为它会很明显。我编辑了我的帖子以添加更多关于它和我的减速器的信息
手动修改 URL（在 react 路由器之外）将导致整个页面刷新并且所有状态都将丢失（除非您将其保存在本地存储中或通过其他方法）。这是你的问题，代码中没有任何问题。
修改 url 会导致页面刷新并跟随重新运行应用程序，因此存储中的所有数据都将被删除。尝试使用history 进行页面导航。以下是如何使用它。 reacttraining.com/react-router/web/api/Hooks/usehistory

标签： reactjs react-redux react-router state

【解决方案1】：

所以我只是不知道刷新时丢失状态的事实。来自原始帖子的评论说明了一切，在这里它们适用于以这里结尾的任何人：

手动修改 URL（在 react 路由器之外）将导致整个页面刷新并且所有状态都将丢失（除非您将其保存在本地存储中或通过其他方法）。这是您的问题，代码中没有任何问题。 ——布莱恩·汤普森

修改 url 会导致页面刷新并跟随重新运行应用程序，因此存储中的所有数据都将被删除。尝试使用历史记录进行页面导航。以下是如何使用它。 reacttraining.com/react-router/web/api/Hooks/usehistory – TopWebGhost

【讨论】：