Магазин не сохраняется после изменения маршрута - PullRequest
Новая
       36

Магазин не сохраняется после изменения маршрута

0 голосов
/ 28 мая 2018

Я пишу приложение, использующее реагирование, реагирование на маршрутизаторе v4, избыточность и избыточность саги.У меня есть форма входа в систему, которая ставит токен после правильного входа в систему.Когда я перехожу к другому компоненту, используя навигацию со ссылками, мой магазин восстанавливается и становится пустым.Я пробовал другое решение, но мне это не помогает.

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();
...