Question

我有一个登录页面，提交表单时会从服务器返回一个令牌。如果令牌存在，则不应显示登录表单。

发生的事情是，当加载登录页面时，商店总是空的，页面显示登录表单，然后填充道具并更新组件

LoginForm.js

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

加载LoginForm。输入详细信息并提交 - 工作正常
调用API，获取令牌并将其保存在商店中 - 正常工作
点击F5，我希望看到＆＃34;您已登录＆＃34; - 一系列的作品。该页面在显示文本

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)

操作

export const ADD_TOKEN = 'ADD_TOKEN';

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

export default {}

减速器

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;

App Loader

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州补水，然后再渲染您的应用。

第一次加载时React Redux存储空

1 个答案: