我真的是 React 和 Redux 的新手,我一直在学习 Stephen Grider 的 Advanced React and Redux 类(class),并且我正在做身份验证的客户端。我已经在我的本地存储中保存了一个 token ,在我刷新页面之前一切似乎都运行良好。当我登录/注册时,导航会更改为显示注销按钮,但如果我手动刷新页面,导航会变回显示登录/注册按钮。
我对此很陌生,不知道应该将什么作为代码片段包含在内。我将保留 reducer 和 actions/index.js。还有 this喜欢我的 git 仓库。
Action /index.js
import axios from 'axios';
import { browserHistory } from 'react-router';
import { push } from 'react-router-redux';
import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from './types';
const API_URL = 'http://localhost:3000';
export function signinUser({ username, password }) {
return function(dispatch) {
// Submit username/password to the server
axios
.post(`${API_URL}/signin`, { username, password })
.then(response => {
// If request is good...
// - Update state o indicate user is authenticated
dispatch({ type: AUTH_USER });
// - Save the JWT token to local storage
localStorage.setItem('token', response.data.token);
// - Redirect to the route '/feature'
browserHistory.push('/feature');
})
.catch(() => {
// If request is bad...
// -Show an error to the user
dispatch(authError('Bad login info'));
});
};
}
export function signupUser({ username, email, password }) {
return function(dispatch) {
axios
.post(`${API_URL}/signup`, { username, email, password })
.then(response => {
dispatch({ type: AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/feature');
})
.catch(response => {
// TODO
console.log(response);
dispatch(authError('There was an error'));
});
};
}
export function authError(error) {
return {
type: AUTH_ERROR,
payload: error
};
}
export function signoutUser() {
localStorage.removeItem('token');
return { type: UNAUTH_USER };
}
reducer/auth_reducer.js
import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from '../actions/types';
export default function(state = {}, action) {
switch (action.type) {
case AUTH_USER:
return { ...state, error: '', authenticated: true };
case UNAUTH_USER:
return { ...state, authenticated: false };
case AUTH_ERROR:
return { ...state, error: action.payload };
}
return state;
}
提前致谢,如果您需要任何额外的代码片段,请告诉我。
最佳答案
do not reinvent the wheel
要在页面刷新后存储 redux 状态,您可以使用
https://www.npmjs.com/package/redux-persist
它易于实现且健壮。
关于javascript - 刷新后 React-Redux 状态丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46673204/