4

我有一个使用 React、Redux、React-Router 和 Intl（还有 react-intl、react-intl-redux、react-router-redux、react-redux）的应用程序。基本的设置，没什么花哨的，我猜。

<Provider store={store}>
  <IntlProvider>
    <Router history={history}>
      <Route path="/:language" component={App}>
        ...
      </Route>
    </Router>
  </IntlProvider>
</Provider>

import { intlReducer } from 'react-intl-redux';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
  routing: routerReducer,
  intl: intlReducer,
  ...
});

(language = locale here) 在标题中，我有一个下拉菜单，您可以从中控制应用程序的语言。应用程序的 url 还包含有关当前语言的信息。

如果 url 是http://example.com/en/post标题语言菜单有en作为选定的选项。

每当我更改下拉值时，url 和标题菜单都应相应更改。

反过来也应该可用：在特定路径（也包括语言）导航或简单地打开页面将反映在intl状态中。

通常我会这样做：

  • 对于我使用的网址更改dispatch(push('/{newLanguage}/...

  • 对于我使用的 intl 状态更改dispatch(updateIntl({ locale, messages }))- 动作创建者 updateIntl 由 react-intl-redux 提供

但是触发这 2 个动作对我的应用程序来说是不可行的，因为它会触发 2 个状态更改，这会生成 2 个渲染（+一些 api 交互）

问题是如何只触发一个动作以使 intl 状态和路由器状态同步？或者，如果我对解决这个问题的一个动作有误，那么一个优雅的解决方案是什么？

可能的解决方案：创建一个动作CHANGE_LANGUAGE并重写两者intlReducer并routerReducer在触发时调整状态？

4

0 回答 0