Phương pháp không cho phép scrollTop khi sử dụng browser back button trong project React + Redux

Trong dự án về React + Redux, về cơ bản nếu chúng ta chuyển page thì sẽ scrollTop nhưng có những trường hợp sẽ không muốn cho scrollTop với browser back button ...Việc implement cho những trường hợp như thế đơn giản hơn nhiều so với những gì chúng ta nghĩ. Note:

1. Lời mở đầu
2. Sửa lại Root.js
3. Thêm vào Reducer
4. Tổng kết

1. Lời mở đầu.

Project React + Redux tạm thời mình sẽ bỏ qua phần cài đặt và tiếp tục. Ngoài ra ở Routing react-router và react-router-redux cũng được dùng nên cũng sẽ install nó.

$ npm install --save react-router-redux react-router

2. Sửa lại Root.js

Chúng ta sẽ viết các xử lý khi back browser hay scrollTop ở tất cả các Container đang có LAP (Link Access Procedure) ở Router.

Root.js

import {bindActionCreators} from 'redux'
import React, {Component, PropTypes} from 'react'
import {Provider} from 'react-redux'
import routes from '../Routes'
import {connect} from 'react-redux'
import {syncHistoryWithStore, routeActions} from 'react-router-redux'
import {Router, browserHistory} from 'react-router'

class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired
  }

  constructor(props) {
    super(props)
  }


  render() {
    const {store} = this.props

    const history = syncHistoryWithStore(browserHistory, store)
    history.listen(location => {
      setTimeout(() => {
        /** nếu là browser back thì sẽ return **/
        if (location.action === 'POP') {
          return
        }
        /** Còn lại thì sẽ di chuyển tới top page **/
        window.scrollTo(0, 0)
      })
    })

    return (
      <Provider store={store}>
        <Router history={browserHistory}>
          {routes}
        </Router>
      </Provider>
    )
  }
}

function mapStateToProps() {
  return {}
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, routeActions), dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Root)

Trường hợp location.action là POP thì vì là back browser nên đang cho phép return. Ngoài ra Push..vv cũng vậy nên có vẻ chúng ta sẽ phải tách ra nhiều xử lý riêng.

3. Thêm vào Reducer.

Thêm routerReducer vào reducer.

RootReducer.js

import {combineReducers} from "redux"
import {routerReducer} from 'react-router-redux'
import usersReducer from "./modules/Users"

export default combineReducers({
  user: usersReducer,
  routing: routerReducer
})

Tiện thể vì đang thêm vào Reducer nên routing có thể sử dụng ở props. Có vẻ như chúng ta có thể làm được nhiều thứ ở mỗi các container.

4. Tổng hợp.

Các package npm đã được install, hễ chúng ta nắm rõ và hiểu được cách làm thì công việc sẽ trở nên đơn giản hơn rất nhiều phải không. Hi vọng nó có thể giúp ích cho ai đó. Cảm ơn các bạn đã đọc bài. (^_^) ahihi~!