javascript - React Redux 商店在第一次加载时为空

Question

我有一个登录页面，在提交表单时从服务器获取一个 token 。如果 token 存在，则不应显示登录表单。

发生的事情是，当加载登录页面时，Store 始终为空，页面显示登录表单，然后填充 props 并更新组件

LoginForm.js

如您所见，当其中一个表单输入更新时，它会更新状态，从而导致组件重新加载 - 很好。

1. 加载登录表单。输入详细信息并提交 - 工作正常
2. 调用 API，获取 token 并将其保存在商店中 - 工作正常
3. 按 F5，我希望看到“您已经登录”- 差不多。该页面在显示文本之前简要显示登录表单

import React, { Component } from 'react';
import { connect } from 'react-redux';

import axios from 'axios';

import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

import { addToken } from '../actions'

class LoginForm extends Component {

  constructor(props){
    super();
    this.state = {
      username: null,
      password: null,
    }
  }

  componentDidMount() {
    console.log('Rendering LoginForm.js');
  }

  handleSubmit =(e)=>{
    console.log('sub');
    axios.post('http://localhost:1337/login', this.state)
    .then((document) => {
      if(document.data.message === 'Login Succesful') {
        this.props.dispatch(addToken(document.data.user));
      }
    })
    .catch((err) => {
      console.log(err);
    })
  }

  handleChange =(e)=> {
    this.setState({
      [e.target.id]: e.target.value
    })
  }

  render() {
    if(this.props.token) {
      console.log(this.props.token);
      return(
        <Paper className='loginPaper' zDepth={2}>
          <p>You are already logged in</p>
        </Paper>
      )
    } else {
      return(
        <Paper className='loginPaper' zDepth={2}>
          <TextField hintText="Username" id='username' floatingLabelText="Username" onChange={this.handleChange}/>
          <TextField hintText="Password" id='password' floatingLabelText="Password" type="password" onChange={this.handleChange} />
          <br/><br/>
          <RaisedButton label="Login" fullWidth={true} onClick {this.handleSubmit}/>
        </Paper>
      )
    }
  }
}

//Get updated State
const mapStateToProps = (state) => {
  return {
    token: state.token
  }
}

export default connect(mapStateToProps)(LoginForm)

Action

export const ADD_TOKEN = 'ADD_TOKEN';

export function addToken(token) {
    return {
        type: ADD_TOKEN,
        token,
    }
}

export default {}

reducer

import { combineReducers } from 'redux'
import { ADD_TOKEN } from '../actions';


function token(state = null, action){
  if(action.type === ADD_TOKEN){
    return action.token;
  }

  return state;
}

const merchHunter = combineReducers({
  token
})

export default merchHunter;

应用加载器

let store = createStore(
  merchHunter,
  undefined,
  compose(autoRehydrate()
  )
);

persistStore(store);


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

Answer 1

我没有使用 redux-persist 库，但它接缝存储不会同步补水。并且您拥有未更新的 redux 状态。我找到了 this solution在这个库的讨论之一中。

简单地说，您可以使用 Promise 等待 redux 状态恢复，然后才呈现您的应用。