Question

我正在使用react，react-router v4，redux和redux-saga编写应用程序。我有一个登录表单，在正确的登录过程后放置一个令牌。当我使用带链接的导航传递给另一个组件时，我的商店将恢复并为空。我尝试了不同的解决方案，但没有任何帮助我。

LoginForm的

class LoginForm extends React.Component {
 constructor(props){
 super();
 this.state = {
  username: '',
  password: ''
 };
 this.onInputUsernameChange = this.onInputUsernameChange.bind(this);
 this.onInputPasswordChange = this.onInputPasswordChange.bind(this);
 this.onSubmit = this.onSubmit.bind(this);
}

onSubmit(){
 const ROOT_URL = "http://localhost:8000";
 let self = this
 axios.post(ROOT_URL + '/login',{
   email: self.state.username,
   password: self.state.password
 })
  .then(response => {
    if(response.status===200){
      this.props.onRequestToken(response.data)
      self.props.history.push("/books");
    }
  })
  .catch(function (error) {
    alert("Invalid login or password! Try again!")
  });
}

 ....

const mapDispatchToProps = dispatch => {
 return {
  onRequestToken: (token) => dispatch({ type: "TOKEN_PUSH", token})
 };
};

export default withRouter(
 connect(null, mapDispatchToProps)(LoginForm));

减速

const rootReducer = combineReducers({
usersReducer,
rentsReducer,
booksReducer,
customerReducer,
authorsReducer,
rolesReducer,
tokenReducer,
router: routerReducer
})

export default rootReducer

App.js

class App extends Component {
 render() {
  return (
   <Provider store={this.props.store}>
    <BrowserRouter>
     <section style={{ width: '100%', height: '100vh', minWidth: 
      '600px'}}>
      <Navigation />
      <Switch>
        <Route exact path="/" render={props => <LoginPage {...props} 
          />} />
        <Route exact path="/login" render={props => <LoginPage 
         {...props} />} />
        <Route exact path="/rents" render={props => <RentsPage 
         {...props} />} />

        ....

      </Switch>
     </section>
    </BrowserRouter>
   </Provider>);}
 }

Sagas

export default function* rootSaga() {
 yield fork(rentSagas);
 yield fork(bookSagas);
 yield fork(customerSagas);
 yield fork(authorsSagas);
 yield fork(rolesSagas);
 yield fork(usersSagas);
}

Index.js

const history = createHistory()
const middleware = routerMiddleware(history)

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
 rootReducer,
 applyMiddleware(sagaMiddleware, middleware))

sagaMiddleware.run(rootSaga)

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

更改路线后不保存商店

0 个答案: