0

私は国際化の実装を行っています。私は自分のルートを持っていて、/:locale/rest/of/routeロードされているロケールに応じて辞書を渡したいと思っています。これは、ルート構成で行うとクールです。しかし、私はすべてのコンテナでこれを行うことしか考えられません。しかし、私の主な不確実性は、コードの重複です。(各コンテナ内this.props.dictionary[this.props.route.locale])

このコードの重複を避ける方法はありますか?

ここに私の設定ファイルがあります：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { Router, Route, IndexRoute, Redirect } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { syncReduxAndRouter } from 'redux-simple-router'
import * as containers from './app/app/containers'
import AppUser from './app/app/AppUser'
import AppCompany from './app/app/AppCompany'
import { createStore, applyMiddleware } from 'redux'
import reducers from './app/app/reducers'

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore)

const store = createStoreWithMiddleware(reducers)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/:lang" component={AppUser}>
        <IndexRoute component={containers.Landing} />

        <Route
          path="workflow"
          component={containers.Workflow} />

        <Route
          path="register"
          component={containers.Register} />

        <Route
          path="login"
          component={containers.Login} />

      </Route>
      <Redirect from="/" to="/en" />
      <Route path="/:lang/company" component={AppCompany}>

        <Route
          path="inbox"
          component={containers.Inbox} />

        <Route
          path="inbox/:caseId"
          component={containers.CaseDetail} />

      </Route>
      <Redirect from="/company/inbox" to="/en/company/inbox" />

    </Router>
  </Provider>,
  document.getElementById('root')
)
4

2 に答える 2

0

最後に最良のパターンは、すべてのコンテナを編集する必要がないためcreateElement、コンポーネントのプロパティを使用することですRouter

関数は次のようになります。

import React from 'react'

import i18n from '../../i18n'

const createElement = (Component, p) => {
  let dictionary = i18n[p.params.locale]
  if (dictionary == undefined) {
    dictionary = i18n['en']
  }
  return <Component {...p} dictionary={dictionary} />
}

export default createElement

最後に index.js または routes ファイルで:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { Router, Route, IndexRoute, Redirect } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { syncReduxAndRouter } from 'redux-simple-router'
import * as containers from './app/app/containers'
import AppUser from './app/app/AppUser'
import AppCompany from './app/app/AppCompany'
import reducers from './app/app/reducers'
import createElement from './app/app/createElement'

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore)

const store = createStoreWithMiddleware(reducers)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

ReactDOM.render(
  <Provider store={store}>
    <Router history={history} createElement={createElement}> <-- NOTICE THIS LINE!!
      <Route path="/:locale" component={AppUser}>

        <IndexRoute component={containers.Landing} />

        <Route
          path="workflow"
          component={containers.Workflow} />

        <Route
          path="register"
          component={containers.Register} />

        <Route
          path="login"
          component={containers.Login} />

      </Route>
      <Redirect from="/" to="/es" />
      <Route path="/:locale/company" component={AppCompany}>

        <Route
          path="inbox"
          component={containers.Inbox} />

        <Route
          path="inbox/:caseId"
          component={containers.CaseDetail} />

      </Route>
      <Redirect from="/company/inbox" to="/es/company/inbox" />

    </Router>
  </Provider>,
  document.getElementById('root')
);
于 2016-02-03T19:33:08.930 に答える
0

を使用しているので、コンポーネントでreduxを使用して、このようなものを実装し、 で辞書にアクセスできます。react-reduxconnectcontainerthis.props.currentDictionary

function mapStateToProps(state, ownProps) {
    return {
        currentDictionary: state.dictionary[ownProps.route.locale]
    }
}

export default connect(mapStateToProps)(Container);
于 2016-02-03T16:17:00.960 に答える