Навигация WiX Доступ к хранилищу избыточности из зарегистрированного компонента

Я использую навигацию WiX с редуксом. https://wix.github.io/react-native-navigation/#/usage

В файле app.jsx я регистрирую все свои экраны в хранилище избыточности:

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
registerScreens(store, Provider);

В registerSceens.js я привязываю хранилище избыточности:

export default (store, Provider) =>  {
Navigation.registerComponent('aApp.FooComponent', () => FooComponent, store, 
Provider);
}

Итак, в FooComponent, как я могу легко получить доступ к хранилищу избыточности?

export default class FooComponent extends Component {
constructor(props) {
    super(props);
    console.log(store); //i need REDUX store 
}

react-native reactjs redux react-navigation velo
person iCode    schedule 11.01.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

class FooComponent extends Component {
  static contextTypes = {
    store: object,  // <--- allow this component to access the store
  };

  componentWillMount(props) {
     const { store } = this.context; // <-- Get it!!
     console.log(store); //i need REDUX store 
  }
}
export default connect()(FooComponent);

После того, как вы определили contextTypes, вы можете получить доступ к хранилищу из this.context.

Хотя вы можете сделать это... вопрос в том... зачем вам делать что-то подобное? connect уже позволяет вам получить доступ к состоянию и действиям привязки, обычно это все, что вам нужно. Как показывает опыт, всегда полезно делать наши компоненты настолько тупыми, насколько это возможно.

person Crysfel    schedule 11.01.2018

arrow_upward
0
arrow_downward

Вам нужно подключить FooComponent к редуксу, используя react-redux. После этого вы можете получить доступ к чему угодно через реквизит.

person Thành Trang    schedule 11.01.2018
comment
Здравствуйте, добавьте экспорт по умолчанию connect () (FooComponent), чтобы разрешить доступ к props.dispatch, но как я могу получить доступ к props.store.subscribe? - person iCode; 11.01.2018
comment
Вам нужно передать 1-й аргумент connect(). Это функция для сопоставления состояния в вашем магазине с реквизитами компонента. Ваш FooComponent: const mapStateToProps = (state) => ({ users: state.users, }); export default connect(mapStateToProps)(FooComponent); После этого вы можете получить доступ к users через props.users. - person Thành Trang; 12.01.2018
comment
И connect() подпишется на вас. Любое изменение данных будет передаваться компоненту через реквизиты. - person Thành Trang; 12.01.2018