reactjs - 路由更改时更新 Redux 状态

Question

我已经尝试解决这个问题有一段时间了，但我越来越困惑。

我想在每次离开或更改路线时重置/更改 Redux 状态。我使用 react-router-redux 和 history.listener 在每次路由更改时调度一个操作

history.listen(location => store.dispatch(resetManualsCategory()));

<小时/>

Action 创建者:

export function resetManualsCategory() {
    return {
        type: 'RESET_MANUALS_CATEGORY'
    }
}

<小时/>

reducer

export function manualCategories(state=[], action) {
    switch (action.type) {
        case 'SELECT_MANUALS_CATEGORY':
           [...]

        case 'RESET_MANUALS_CATEGORY':
            console.log('test reducer');
            return Object.assign({}, state, {
                manualCategory: 'test'
            })

        default:
            return state
    }
}

最让我困惑的是，如果我刷新页面或在顶部导航中的路线上单击两次，状态就会更新，但单个路线更改不会影响 redux 状态，即使操作和 reducer 触发(显示在控制台中测试消息)。

我做错了什么以及这里实际发生了什么？

Answer 1

react-router-redux 提供了一个 LOCATION_CHANGE 操作，该操作已在每次路线更改时分派(dispatch)。你可以做简单的:

import { LOCATION_CHANGE } from 'react-router-redux'

export function manualCategories(state=[], action) {
    switch (action.type) {
        case LOCATION_CHANGE:
            /*
              action.payload is something like:
              {
                pathname: '/',
                search: '',
                hash: '',
                state: null,
                action: 'PUSH',
                key: 'xwl8yl',
                query: {},
                $searchBase: {
                  search: '',
                  searchBase: ''
                }
              }
            */

        default:
            return state
    }
}