Доступ к хранилищу redux от дочерних элементов redux-simple-router

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

Вот как выглядит мой компонент верхнего уровня:

class App extends Component {
  render() {
    return (
      <div>
         { children }
      </div>
    );
  }
}

Мой код redux-simple-router выглядит так:

render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={ Home } />
        <Route path="/example" component={ ExampleRoute } />
      </Route>
    </Router>
  </Provider>,
  rootElement
)

Если я сброшу реквизиты из компонента ExampleRoute, у меня не будет доступа к хранилищу. Любая помощь приветствуется!


reactjs node.js javascript redux react-router-redux
person Grant Eagon    schedule 20.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны использовать connect из react-redux, чтобы получить dispatch и текущее состояние из хранилища. Это описано в документации по редукции здесь: http://rackt.org/redux/docs/basics/UsageWithReact.html

Вот ваш компонент Example:

//...
import { connect } from 'react-redux'
//...

export class Example extends Component {
    render () {
        const { dispatch, thingName } = this.props
        return (
            <button onClick={ () => {
                dispatch(myAwesomeActionCreator())
            }}>{ thingName }</button>
        );
    }
}

export default connect(state => state)(Example)

Несколько хороших примеров использования connect можно найти в документации react-redux: https://github.com/rackt/react-redux/blob/master/docs/api.md#examples

person rojoca    schedule 20.01.2016

arrow_upward
0
arrow_downward

Я смог заставить это работать с промежуточным программным обеспечением "Monkeypatch", но должен быть лучший способ.

Сначала я создал функцию для исправления дочерней переменной. Эта функция принимает дочерний элемент, отправку и хранилище в качестве аргументов и возвращает обновленную дочернюю переменную с ключами для хранилища и отправки:

function routeStoreMiddleware (children, dispatch, store) {
  return {
    ...children,
    props: {
      ...children.props,
      dispatch: dispatch,
      store: store
    }
  }
}

Затем я просто обновил компонент, который уже имеет доступ к диспетчеризации и хранилищу, чтобы использовать функцию промежуточного программного обеспечения:

class App extends Component {
  render() {
    return (
      <div>
         { routeStoreMiddleware(children, dispatch, store) }
      </div>
    );
  }
}

Поскольку функция routeStoreMiddleware с неудачным названием просто возвращает обновленный дочерний объект, она по-прежнему работает.

Теперь я могу отправлять события и отображать данные из компонента ExampleRoute.

импортировать React, {Компонент} из «реагировать»; импортировать {myAwesomeActionCreator} из '../actions.js'

export class Example extends Component {
  render () {
    const { dispatch, store } = this.props
    return (
      <button onClick={ () => {
        dispatch(myAwesomeActionCreator())
      }}>{ store.thingName }</button>
    );
  }
}

Ура!

Обратите внимание: я много читал здесь о том, как правильно сделать промежуточное ПО в редуксе, но у меня еще не было времени, чтобы понять это полностью. Есть лучший способ, чем я сделал здесь.

person Grant Eagon    schedule 20.01.2016